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 相关文章推荐
javascript 动态数据下的锚点错位问题解决方法
Dec 24 Javascript
javascript跨域刷新实现代码
Jan 01 Javascript
jquery $.getJSON()跨域请求
Dec 21 Javascript
jquery插件制作 图片走廊 gallery
Aug 17 Javascript
JS实现鼠标滑过链接改变网页背景颜色的方法
Oct 20 Javascript
JS提交form表单实例分析
Dec 10 Javascript
Node.js本地文件操作之文件拷贝与目录遍历的方法
Feb 16 Javascript
非常棒的jQuery图片轮播效果
Apr 17 Javascript
angular 动态组件类型详解(四种组件类型)
Feb 22 Javascript
详解在vue-cli项目中安装node-sass
Jun 21 Javascript
JavaScript创建对象的七种方式全面总结
Aug 21 Javascript
vue实现form表单与table表格的数据关联功能示例
Jan 29 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
Laravel5.1 框架Request请求操作常见用法实例分析
2020/01/04 PHP
通用JS事件写法实现代码
2009/01/07 Javascript
jQuery 使用手册(五)
2009/09/23 Javascript
JS跨域代码片段
2012/08/30 Javascript
通过复制Table生成word和excel的javascript代码
2014/01/20 Javascript
js中split和replace的用法实例
2015/02/28 Javascript
js实现点击文本框显示日期选择器特效代码分享
2020/05/21 Javascript
JS中取二维数组中最大值的方法汇总
2016/04/17 Javascript
JS在一定时间内跳转页面及各种刷新页面的实现方法
2016/05/26 Javascript
jQuery简单实现点击文本框复制内容到剪贴板上的方法
2016/08/01 Javascript
Jquery实现上下移动和排序代码
2016/10/17 Javascript
轻松理解JavaScript闭包
2017/03/14 Javascript
使用命令行工具npm新创建一个vue项目的方法
2017/12/27 Javascript
vue vuex vue-rouert后台项目——权限路由(适合初学)
2017/12/29 Javascript
写一个移动端惯性滑动&amp;回弹Vue导航栏组件 ly-tab
2018/03/06 Javascript
vue.js高德地图实现热点图代码实例
2019/04/18 Javascript
详解wepy开发小程序踩过的坑(小结)
2019/05/22 Javascript
[01:01:29]2018DOTA2亚洲邀请赛 4.4 淘汰赛 VP vs Liquid 第一场
2018/04/05 DOTA
[01:06] DOTA2英雄背景故事第三期之秩序法则光之守卫
2020/07/07 DOTA
Python爬取Coursera课程资源的详细过程
2014/11/04 Python
Python列表删除的三种方法代码分享
2017/10/31 Python
Python中xrange与yield的用法实例分析
2017/12/26 Python
Python 使用PIL numpy 实现拼接图片的示例
2018/05/08 Python
Python判断是否json是否包含一个key的方法
2018/12/31 Python
Python提取特定时间段内数据的方法实例
2019/04/01 Python
Python random模块制作简易的四位数验证码
2020/02/01 Python
pyspark对Mysql数据库进行读写的实现
2020/12/30 Python
澳大利亚最受欢迎的女士度假服装:Kabana Shop
2020/10/10 全球购物
移动通信行业实习自我鉴定
2013/09/28 职场文书
《大自然的语言》教学反思
2014/04/08 职场文书
小露珠教学反思
2014/04/30 职场文书
企业党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
教师党员学习群众路线心得体会
2014/11/04 职场文书
幼儿园教师节活动总结
2015/03/23 职场文书
为自己工作观后感
2015/06/11 职场文书
北京大学中文系教授推荐的10本小说
2019/08/08 职场文书