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 美元符冲突的解决方法
Mar 28 Javascript
基于JQuery实现滚动到页面底端时自动加载更多信息
Jan 31 Javascript
javascript学习笔记之10个原生技巧
May 21 Javascript
jQuery插件multiScroll实现全屏鼠标滚动切换页面特效
Apr 12 Javascript
九种原生js动画效果
Nov 11 Javascript
基于gulp合并压缩Seajs模块的方式说明
Jun 14 Javascript
Easyui Datagrid自定义按钮列(最后面的操作列)
Jul 13 Javascript
详解Angular6.0使用路由步骤(共7步)
Jun 29 Javascript
layer.confirm取消按钮绑定事件的方法
Aug 17 Javascript
微信小程序实现多选删除列表数据功能示例
Jan 15 Javascript
微信小程序 搜索框组件代码实例
Sep 06 Javascript
vue实现移动端返回顶部
Oct 12 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
腾讯QQ php程序员面试题目整理
2010/06/08 PHP
PHP模块 Memcached功能多于Memcache
2011/06/14 PHP
nginx+php-fpm配置文件的组织结构介绍
2012/11/07 PHP
php实现多城市切换特效
2015/08/09 PHP
PHP中ltrim与rtrim去除左右空格及特殊字符实例
2016/01/07 PHP
php版交通银行网银支付接口开发入门教程
2016/09/26 PHP
php获取ip及网址的简单方法(必看)
2017/04/01 PHP
打开超链需要“确认”对话框的方法
2007/03/08 Javascript
JS 获取span标签中的值的代码 支持ie与firefox
2009/08/24 Javascript
jquery与google map api结合使用 控件,监听器
2010/03/04 Javascript
javascript 函数调用的对象和方法
2010/07/01 Javascript
Javascript基础教程之数据类型 (数值 Number)
2015/01/18 Javascript
JS实现跟随鼠标闪烁转动色块的方法
2015/02/26 Javascript
javascript常见数据验证插件大全
2015/08/03 Javascript
JQuery datepicker 用法详解
2015/12/25 Javascript
使用NodeJs 开发微信公众号(三)微信事件交互实例
2016/03/02 NodeJs
Bootstrap table使用方法总结
2017/05/10 Javascript
全面解析jQuery中的$(window)与$(document)的用法区别
2017/08/15 jQuery
vue父子组件的嵌套的示例代码
2017/09/08 Javascript
jQuery+PHP实现上传裁剪图片
2020/06/29 jQuery
python Django批量导入不重复数据
2016/03/25 Python
Python3 socket同步通信简单示例
2017/06/07 Python
Python 由字符串函数名得到对应的函数(实例讲解)
2017/08/10 Python
python super用法及原理详解
2020/01/20 Python
Python中的With语句的使用及原理
2020/07/29 Python
python接口自动化之ConfigParser配置文件的使用详解
2020/08/03 Python
基于Python模拟浏览器发送http请求
2020/11/06 Python
详解HTML5布局和HTML5标签
2020/10/26 HTML / CSS
梵蒂冈和罗马卡:Omnia Card Pass
2018/02/10 全球购物
Fanatics法国官网:美国体育电商
2019/08/27 全球购物
阿里巴巴Oracle DBA笔试题答案-备份恢复类
2013/11/20 面试题
中专毕业生的自荐书
2014/07/01 职场文书
贪污检举信范文
2015/03/02 职场文书
治庸问责工作总结
2015/08/11 职场文书
网络研修心得体会
2016/01/08 职场文书
数据库的高级查询六:表连接查询:外连接(左外连接,右外连接,UNION关键字,连接中ON与WHERE的不同)
2021/04/05 MySQL