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 相关文章推荐
二叉树的非递归后序遍历算法实例详解
Feb 07 Javascript
基于jQuery+PHP+Mysql实现在线拍照和在线浏览照片
Sep 06 Javascript
jQuery实现移动端滑块拖动选择数字效果
Dec 24 Javascript
angularjs之$timeout指令详解
Jun 13 Javascript
使用JQ完成表格隔行换色的简单实例
Aug 25 Javascript
VSCode配置react开发环境的步骤
Dec 27 Javascript
如何利用vue+vue-router+elementUI实现简易通讯录
May 13 Javascript
JavaScript使用面向对象实现的拖拽功能详解
Jun 12 Javascript
ES6数组与对象的解构赋值详解
Jun 14 Javascript
vue filter 完美时间日期格式的代码
Aug 14 Javascript
Vue项目中如何使用Axios封装http请求详解
Oct 23 Javascript
JS数组方法slice()用法实例分析
Jan 18 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微信公众开发之获取周边酒店信息的方法
2014/12/22 PHP
php+ajax实现无刷新数据分页的办法
2015/11/02 PHP
在WordPress中实现评论头像的自定义默认和延迟加载
2015/11/24 PHP
微信支付开发维权通知实例
2016/07/12 PHP
CI框架(ajax分页,全选,反选,不选,批量删除)完整代码详解
2016/11/01 PHP
laravel使用Faker数据填充的实现方法
2019/04/12 PHP
jQuery学习5 jQuery事件模型
2010/02/07 Javascript
js 居中漂浮广告
2010/03/21 Javascript
js获取浏览器的可视区域尺寸的实现代码
2011/11/30 Javascript
jQuery设置和移除文本框默认值的方法
2015/03/09 Javascript
javascript制作2048游戏
2015/03/30 Javascript
javascript实现html页面之间参数传递的四种方法实例分析
2015/12/15 Javascript
jQuery内容折叠效果插件用法实例分析(附demo源码)
2016/04/28 Javascript
jquery实现用户登陆界面(示例讲解)
2017/09/06 jQuery
vue2手机APP项目添加开屏广告或者闪屏广告
2017/11/28 Javascript
jQuery实现标签子元素的添加和赋值方法
2018/02/24 jQuery
js前端面试之同步与异步问题详解
2019/04/03 Javascript
JavaScript中的类型检查
2020/02/03 Javascript
如何在vue中使用HTML 5 拖放API
2021/01/14 Vue.js
python读文件逐行处理的示例代码分享
2013/12/27 Python
跟老齐学Python之Python安装
2014/09/12 Python
python通过正则查找微博@(at)用户的方法
2015/03/13 Python
基于python yield机制的异步操作同步化编程模型
2016/03/18 Python
Python字典创建 遍历 添加等实用基础操作技巧
2018/09/13 Python
浅谈python3.x pool.map()方法的实质
2019/01/16 Python
Python面向对象之多态原理与用法案例分析
2019/12/30 Python
python计算导数并绘图的实例
2020/02/29 Python
借助Paramiko通过Python实现linux远程登陆及sftp的操作
2020/03/16 Python
最新PyCharm 2020.2.3永久激活码(亲测有效)
2020/11/26 Python
世界上获奖最多的手机镜头:Olloclip
2018/03/03 全球购物
SOKOLOV官网:俄罗斯珠宝首饰品牌
2021/01/02 全球购物
2014年教师业务学习材料
2014/05/12 职场文书
2014年教师批评与自我批评思想汇报
2014/09/20 职场文书
个人查摆问题整改措施
2014/10/04 职场文书
MySQL大小写敏感的注意事项
2021/05/24 MySQL
CI Games宣布《堕落之王2》使用虚幻引擎5制作 预计将于2023年正式发售
2022/04/11 其他游戏