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 相关文章推荐
防止网站内容被拷贝的一些方法与优缺点好处与坏处分析
Nov 30 Javascript
javascript replace方法与正则表达式
Feb 19 Javascript
jQuery基本选择器选择元素使用介绍
Apr 18 Javascript
Labelauty?jQuery单选框/复选框美化插件分享
Sep 26 Javascript
前端微信支付js代码
Jul 25 Javascript
javascript监听页面刷新和页面关闭事件方法详解
Jan 09 Javascript
动态加载css方法实现和深入解析
Jan 18 Javascript
利用Jquery实现几款漂亮实用的时间轴(附示例代码)
Feb 15 Javascript
jquery在vue脚手架中的使用方式示例
Aug 29 jQuery
HTML5+JS+JQuery+ECharts实现异步加载问题
Dec 16 jQuery
Vue实现开心消消乐游戏算法
Oct 22 Javascript
Vue实现图书管理案例
Jan 20 Vue.js
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
WordPress判断用户是否登录的代码
2011/03/17 PHP
php字符串比较函数用法小结(strcmp,strcasecmp,strnatcmp及strnatcasecmp)
2016/07/18 PHP
PHP环形链表实现方法示例
2017/09/15 PHP
PHP闭包定义与使用简单示例
2018/04/13 PHP
thinkphp框架表单数组实现图片批量上传功能示例
2020/04/04 PHP
PHP连接MySQL数据库三种实现方法
2020/12/10 PHP
jquery 图片 上一张 下一张 链接效果(续篇)
2010/04/20 Javascript
导入extjs、jquery 文件时$使用冲突问题解决方法
2014/01/14 Javascript
node.js中的fs.renameSync方法使用说明
2014/12/16 Javascript
jQuery点击按钮弹出遮罩层且内容居中特效
2015/12/14 Javascript
Google 爬虫如何抓取 JavaScript 的内容
2017/04/07 Javascript
jQuery动态追加页面数据以及事件委托详解
2017/05/06 jQuery
bing Map 在vue项目中的使用详解
2018/04/09 Javascript
JavaScript函数、闭包、原型、面向对象学习笔记
2018/09/06 Javascript
vue2.0 + ele的循环表单及验证字段方法
2018/09/18 Javascript
layDate插件设置开始和结束时间
2018/11/15 Javascript
微信小程序调用微信支付接口的实现方法
2019/04/29 Javascript
ElementUI radio组件选中小改造
2019/08/12 Javascript
json字符串对象转换代码实例
2019/09/28 Javascript
vue实现商城秒杀倒计时功能
2019/12/12 Javascript
JavaScript布尔运算符原理使用解析
2020/05/06 Javascript
详解Vue.js 响应接口
2020/07/04 Javascript
[02:20]2014DOTA2西雅图邀请赛 MVP外卡赛首胜采访
2014/07/09 DOTA
[00:57]英雄,你的补给到了!
2020/11/13 DOTA
tornado框架blog模块分析与使用
2013/11/21 Python
django 开发忘记密码通过邮箱找回功能示例
2018/04/17 Python
python3实现名片管理系统
2020/11/29 Python
Python集中化管理平台Ansible介绍与YAML简介
2019/06/12 Python
animation和transition的区别
2020/10/12 HTML / CSS
HTML5 Canvas+JS控制电脑或手机上的摄像头实例
2014/05/03 HTML / CSS
教师通用专业自荐书范文
2014/02/11 职场文书
群众路线教育查摆剖析材料
2014/10/10 职场文书
房地产项目合作意向书
2015/05/08 职场文书
读《解忧杂货店》有感:请相信一切都是最好的安排
2019/11/07 职场文书
详解PyTorch模型保存与加载
2022/04/28 Python
Django框架中视图的用法
2022/06/10 Python