js实现添加删除表格(两种方法)


Posted in Javascript onApril 27, 2017

效果图:

js实现添加删除表格(两种方法)

代码如下:

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title></title>
 <style type="text/css">
  #box{
  margin:0 auto;
  background:yellow;
  border:4px double #808080;
  width:600px;
  text-align:center;
  }
  #box input{
  width:130px;
  }
  #box table{
  margin:5px 0;
  background:lawngreen;
  }
 </style>
 <script type="text/javascript">
  onload = function(){
  var aInput = document.getElementsByTagName('input');
  var bTn = document.getElementById('btn');
  var table = document.getElementsByTagName('table')[0];
//  

  //方法一
//  bTn.onclick = function(){
//   
//   var oTr=document.createElement('tr');//创建节点
//   table.appendChild(oTr);//创建table的子节点tr

//   var oTd=document.createElement('td');//创建节点
//   oTd.innerHTML=aInput[0].value;//给表格赋内容
//   oTr.appendChild(oTd);//创建tr的子节点td
//   
//   var oTd=document.createElement('td');//创建节点
//   oTd.innerHTML=aInput[1].value;//给表格赋内容
//   oTr.appendChild(oTd);//创建tr的子节点td
//   
//   var oTd=document.createElement('td') ;//创建节点
//   oTd.innerHTML=aInput[2].value;//给表格赋内容
//   oTr.appendChild(oTd);//创建tr的子节点td

//   var oTd=document.createElement('td') ;//创建节点
//   oTd.innerHTML='<a href="javascript:;" rel="external nofollow" rel="external nofollow" >删除</a>';//给表格赋内容
//   oTr.appendChild(oTd);//创建tr的子节点td

//   oTd.getElementsByTagName('a')[0].onclick=function(){
//   table.removeChild(this.parentNode.parentNode);
//   //移除table下面的子节点tr
//   }//删除表格行

  //方法二
  bTn.onclick = function(){

   var oTr=document.createElement('tr');//创建节点
   table.appendChild(oTr);//创建table的子节点tr
   for(var i = 0; i < aInput.length-1; i ++){
   var oTd=document.createElement('td');//创建节点
   oTd.innerHTML=aInput[i].value;//给表格赋内容
   oTr.appendChild(oTd);//创建tr的子节点td
   }

   var oTd=document.createElement('td') ;//创建节点
   oTd.innerHTML='<a href="javascript:;" rel="external nofollow" rel="external nofollow" >删除</a>';//给表格赋内容
   oTr.appendChild(oTd);//创建tr的子节点td

   oTd.getElementsByTagName('a')[0].onclick=function(){
   table.deleteRow(1);
   }
  }
  }  
 </script>
 </head>
 <body>
 <div id="box">
  ID:<input type="text" name="" id="" value="" />
  姓名:<input type="text" name="" id="" value="" />
  电话:<input type="text" name="" id="" value="" />
  <input type="button" name="btn" id="btn" value="保存" style="width:50px;"/>
  <table border="" cellspacing="" cellpadding="" width="600px" >
  <tr>
  <td>Id</td>
  <td>name</td>
  <td>tal</td>
  <td>操作</td>
  </tr>  
  </table>
 </div>

 </body>
</html>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
jquery对表单操作2
Apr 06 Javascript
JavaScript实现自己的DOM选择器原理及代码
Mar 04 Javascript
Javascript 多浏览器兼容总结(实战经验)
Oct 30 Javascript
JavaScript的setAttribute兼容性问题解决方法
Nov 11 Javascript
javascript实现可全选、反选及删除表格的方法
May 15 Javascript
微信小程序 特效菜单抽屉效果实例代码
Jan 11 Javascript
js图片上传的封装代码
Aug 01 Javascript
javascript实现文件拖拽事件
Mar 29 Javascript
js实现点击展开隐藏效果(实例代码)
Sep 28 Javascript
微信小程序中如何计算距离某个节日还有多少天
Jul 15 Javascript
layui表单验证select下拉框实现验证的方法
Sep 05 Javascript
javascript实现鼠标点击生成文字特效
Dec 24 Javascript
JS/jquery实现一个网页内同时调用多个倒计时的方法
Apr 27 #jQuery
vue2 前后端分离项目ajax跨域session问题解决方法
Apr 27 #Javascript
Webpack中css-loader和less-loader的使用教程
Apr 27 #Javascript
jQuery使用正则验证15/18身份证的方法示例
Apr 27 #jQuery
Vue.js 2.0 移动端拍照压缩图片预览及上传实例
Apr 27 #Javascript
微信小程序 实现动态显示和隐藏某个控件
Apr 27 #Javascript
JS ES6中setTimeout函数的执行上下文示例
Apr 27 #Javascript
You might like
PHP系列学习之日期函数使用介绍
2012/08/18 PHP
PHP微信红包API接口
2015/12/05 PHP
win7 wamp 64位 php环境开启curl服务遇到的问题及解决方法
2018/09/16 PHP
Mootools 1.2教程 类(一)
2009/09/15 Javascript
js操作ajax返回的json的注意问题!
2010/02/23 Javascript
两个Javascript小tip资料
2010/11/23 Javascript
分享2个jQuery插件--jquery.fileupload与artdialog
2014/12/26 Javascript
HTML5 实现的一个俄罗斯方块实例代码
2016/09/19 Javascript
JavaScript获取键盘按键的键码(参照表)
2017/01/10 Javascript
详解使用angular-cli发布i18n多国语言Angular应用
2017/05/20 Javascript
Node.js中 __dirname 的使用介绍
2017/06/19 Javascript
python选择排序算法实例总结
2015/07/01 Python
Python中的super()方法使用简介
2015/08/14 Python
Python面向对象特殊成员
2017/04/24 Python
一文总结学习Python的14张思维导图
2017/10/17 Python
shell命令行,一键创建 python 模板文件脚本方法
2018/03/20 Python
pandas值替换方法
2018/07/10 Python
Pandas:Series和DataFrame删除指定轴上数据的方法
2018/11/10 Python
python使用wxpy轻松实现微信防撤回的方法
2019/02/21 Python
python绘制双Y轴折线图以及单Y轴双变量柱状图的实例
2019/07/08 Python
解决Django migrate不能发现app.models的表问题
2019/08/31 Python
使用python快速在局域网内搭建http传输文件服务的方法
2019/11/14 Python
使用python 的matplotlib 画轨道实例
2020/01/19 Python
python 错误处理 assert详解
2020/04/20 Python
Django models文件模型变更错误解决
2020/05/11 Python
python爬取天气数据的实例详解
2020/11/20 Python
python爬虫线程池案例详解(梨视频短视频爬取)
2021/02/20 Python
浅谈html5增强的页面元素
2016/06/14 HTML / CSS
台湾母婴用品限时团购:妈咪爱
2018/08/03 全球购物
银行员工辞职信范文
2014/01/20 职场文书
职位说明书范文
2014/05/07 职场文书
广播体操口号
2014/06/18 职场文书
教师个人成长总结
2015/02/11 职场文书
庆祝教师节活动总结
2015/03/23 职场文书
搭讪开场白台词大全
2015/05/28 职场文书
win11无法添加打印机怎么办? 提示windows无法打开添加打印机的解决办法
2022/04/05 数码科技