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 相关文章推荐
犀利的js 函数集合
Jun 11 Javascript
js 数值项目的格式化函数代码
May 14 Javascript
javascript用户注册提示效果的简单实例
Aug 17 Javascript
分享一款基于jQuery的视频播放插件
Oct 09 Javascript
JavaScript预解析及相关技巧分析
Apr 21 Javascript
简单实现jQuery轮播效果
Aug 18 jQuery
js 两个日期比较相差多少天的实例
Oct 19 Javascript
微信小程序支付PHP代码
Aug 23 Javascript
深入理解 Koa 框架中间件原理
Oct 18 Javascript
JS自定义对象创建与简单使用方法示例
Jan 15 Javascript
vue-video-player 解决微信自动全屏播放问题(横竖屏导致样式错乱问题)
Feb 25 Javascript
微信浏览器左上角返回按钮监听的实现
Mar 04 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
提取HTML标签
2006/10/09 PHP
使用PHP生成图片的缩略图的方法
2015/08/18 PHP
Laravel下生成验证码的类
2017/11/15 PHP
window.open的功能全解析
2006/10/10 Javascript
javascript removeChild 使用注意事项
2009/04/11 Javascript
兼容IE/Firefox/Opera/Safari的检测页面装载完毕的脚本Ext.onReady的实现
2009/07/14 Javascript
script不刷新页面的联动前后代码
2013/09/18 Javascript
Javascript字符串对象的常用方法简明版
2014/06/26 Javascript
常用的jQuery前端技巧收集
2014/12/24 Javascript
jQuery中replaceWith()方法用法实例
2014/12/25 Javascript
jQuery实现鼠标滚轮动态改变样式或效果
2015/01/05 Javascript
利用JQuery阻止事件冒泡
2016/12/01 Javascript
微信小程序 闭包写法详细介绍
2016/12/14 Javascript
NodeJS实现客户端js加密
2017/01/09 NodeJs
微信小程序实现点击按钮修改文字大小功能【附demo源码下载】
2017/12/06 Javascript
JavaScript之数组扁平化详解
2019/06/03 Javascript
[01:01:51]EG vs VG Supermajor小组赛B组 BO3 第二场 6.2
2018/06/03 DOTA
Python使用MONGODB入门实例
2015/05/11 Python
在Python中使用AOP实现Redis缓存示例
2017/07/11 Python
python 函数内部修改外部变量的方法
2018/12/18 Python
Python实现监控Nginx配置文件的不同并发送邮件报警功能示例
2019/02/26 Python
使用Django简单编写一个XSS平台的方法步骤
2019/03/25 Python
pandas.read_csv参数详解(小结)
2019/06/21 Python
Python  Django 母版和继承解析
2019/08/09 Python
Django连接数据库并实现读写分离过程解析
2019/11/13 Python
Django用户身份验证完成示例代码
2020/04/03 Python
Python logging日志库空间不足问题解决
2020/09/14 Python
HTML5注册页面示例代码
2014/03/27 HTML / CSS
英国领先的男士服装和时尚零售商:Burton
2017/01/09 全球购物
澳大利亚最受欢迎的美发用品目的地:AMR
2019/08/28 全球购物
委托书模板
2014/04/04 职场文书
高中综合实践活动总结
2014/07/07 职场文书
2015年党建工作目标责任书
2015/05/08 职场文书
股东出资协议书
2016/03/21 职场文书
接触艺术对孩子学习思维有益
2019/08/06 职场文书
python中%格式表达式实例用法
2021/06/18 Python