JavaScript中动态向表格添加数据


Posted in Javascript onJanuary 24, 2017

利用JavaScript ,动态向表格中添加数据,其实方法很简单的,下面给大家分享下实现方法

1. 首先先写出表格的表头和主干部分

<table width="600" border="1" cellspacing="0"> 
  <thead> 
   <tr> 
     <th>编号</th> 
     <th>姓名</th> 
     <th>职位</th> 
     <th>操作</th> 
   </tr>  
  </thead> 
  <tbody id="tbMain"></tbody> 
</table>

2. 接下来就是网表格里面添加数据,这里用的是原生javascript

<script type="text/javascript"> 
 //模拟一段JSON数据,实际要从数据库中读取 
 var per = [ 
      {id:001,name:'张珊',job:'学生'}, 
      {id:002,name:'李斯',job:'教师'}, 
      {id:003,name:'王武',job:'经理'} 
      ];  
 window.onload = function(){ 
   var tbody = document.getElementById('tbMain'); 
   for(var i = 0;i < per.length; i++){ //遍历一下json数据 
     var trow = getDataRow(per[i]); //定义一个方法,返回tr数据 
     tbody.appendChild(trow); 
    } 
   } 
 function getDataRow(h){ 
   var row = document.createElement('tr'); //创建行 
   var idCell = document.createElement('td'); //创建第一列id 
   idCell.innerHTML = h.id; //填充数据 
   row.appendChild(idCell); //加入行 ,下面类似 
   var nameCell = document.createElement('td');//创建第二列name 
   nameCell.innerHTML = h.name; 
   row.appendChild(nameCell); 
   var jobCell = document.createElement('td');//创建第三列job 
   jobCell.innerHTML = h.job; 
   row.appendChild(jobCell); 
   //到这里,json中的数据已经添加到表格中,下面为每行末尾添加删除按钮 
   var delCell = document.createElement('td');//创建第四列,操作列 
   row.appendChild(delCell); 
   var btnDel = document.createElement('input'); //创建一个input控件 
   btnDel.setAttribute('type','button'); //type="button" 
   btnDel.setAttribute('value','删除');  
   //删除操作 
   btnDel.onclick=function(){ 
     if(confirm("确定删除这一行嘛?")){ 
       //找到按钮所在行的节点,然后删掉这一行 
       this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode); 
       //btnDel - td - tr - tbody - 删除(tr) 
       //刷新网页还原。实际操作中,还要删除数据库中数据,实现真正删除 
       } 
     } 
   delCell.appendChild(btnDel); //把删除按钮加入td,别忘了 
   return row; //返回tr数据   
   }   
</script>

3. 网页测试

JavaScript中动态向表格添加数据

显示成功,点击删除按钮,并确定即可删除这一行

删除第二行,可以!

JavaScript中动态向表格添加数据

以上所述是小编给大家介绍的JavaScript中动态向表格添加数据,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js判断输入是否为正整数、浮点数等数字的函数代码
Nov 17 Javascript
javascript smipleChart 简单图标类
Jan 12 Javascript
关于IE BUG与字符串截取substr的解决办法
Apr 10 Javascript
JavaScript框架(iframe)操作总结
Apr 16 Javascript
js判断当页面无法回退时关闭网页否则就history.go(-1)
Aug 07 Javascript
js交换排序 冒泡排序算法(Javascript版)
Oct 04 Javascript
jQuery中is()方法用法实例
Jan 06 Javascript
javascript与jquery动态创建html元素示例
Jul 25 Javascript
无循环 JavaScript(map、reduce、filter和find)
Apr 08 Javascript
jQuery读取本地的json文件(实例讲解)
Oct 31 jQuery
JavaScript实现正则去除a标签并保留内容的方法【测试可用】
Jul 18 Javascript
vue-cli3.0使用及部分配置详解
Aug 29 Javascript
微信小程序开发的四十个技术窍门总结(推荐)
Jan 23 #Javascript
ajax分页效果(bootstrap模态框)
Jan 23 #Javascript
jquery easyui DataGrid简单示例
Jan 23 #Javascript
浅谈javascript的闭包
Jan 23 #Javascript
JS复制对应id的内容到粘贴板(Ctrl+C效果)
Jan 23 #Javascript
JavaScript常用正则验证函数实例小结【年龄,数字,Email,手机,URL,日期等】
Jan 23 #Javascript
Node.js Express 框架 POST方法详解
Jan 23 #Javascript
You might like
数据库中排序的对比及使用条件详解
2012/02/23 PHP
php后门URL的防范
2013/11/12 PHP
php实现加减法验证码代码
2014/02/14 PHP
PHP错误WARNING: SESSION_START() [FUNCTION.SESSION-START]解决方法
2014/05/04 PHP
jquery 模式对话框终极版实现代码
2009/09/28 Javascript
Jquery中val()表单取值赋值的实例代码
2013/08/15 Javascript
Js中的onblur和onfocus事件应用介绍
2013/08/27 Javascript
JavaScript如何从listbox里同时删除多个项目
2013/10/12 Javascript
jquery获取及设置outerhtml的方法
2015/03/09 Javascript
javascript Array 数组常用方法
2015/04/05 Javascript
javascript实现框架高度随内容改变的方法
2015/07/23 Javascript
JavaScript实现页面跳转的方式汇总
2016/05/16 Javascript
Javascript iframe交互并兼容各种浏览器的解决方法
2016/07/12 Javascript
ES6新增的math,Number方法
2017/08/06 Javascript
JSON对象转化为字符串详解
2017/08/11 Javascript
js数组方法reduce经典用法代码分享
2018/01/07 Javascript
mpvue构建小程序的方法(步骤+地址)
2018/05/22 Javascript
react 父子组件之间通讯props
2018/09/08 Javascript
angularJs中$scope数据序列化的实例
2018/09/30 Javascript
小程序云开发部署攻略(图文教程)
2018/10/30 Javascript
JQuery判断radio单选框是否选中并获取值的方法
2019/01/17 jQuery
[02:10]DOTA2 TI10勇士令状玩法及不朽Ⅰ展示:焕新世界,如你所期
2020/05/29 DOTA
[57:59]完美世界DOTA2联赛循环赛 Ink Ice vs LBZS BO2第一场 11.05
2020/11/05 DOTA
python字符串替换示例
2014/04/24 Python
使用Python实现简单的服务器功能
2017/08/25 Python
浅谈flask截获所有访问及before/after_request修饰器
2018/01/18 Python
Python实现加载及解析properties配置文件的方法
2018/03/29 Python
Ubuntu下使用Python实现游戏制作中的切分图片功能
2018/03/30 Python
Python3中的tuple函数知识点讲解
2021/01/03 Python
Blank NYC官网:夹克、牛仔裤等
2020/12/16 全球购物
EJB包括(SessionBean,EntityBean)说出他们的生命周期,及如何管理事务的
2015/07/24 面试题
大专生自荐信
2013/10/04 职场文书
学生会干部自荐信
2014/02/04 职场文书
2015年全国保险公众宣传日活动方案
2015/05/06 职场文书
离职员工给领导和同事的感谢信
2015/11/03 职场文书
美国运营商 T-Mobile 以 117.83Mb/s 的速度排第一位
2022/04/21 数码科技