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 相关文章推荐
jquery 仿QQ校友的DIV模拟窗口效果源码
Mar 24 Javascript
javascript学习笔记(十七) 检测浏览器插件代码
Jun 20 Javascript
ExtJS4如何自动生成控制grid的列显示、隐藏的checkbox
May 02 Javascript
JQuery中使用on方法绑定hover事件实例
Dec 09 Javascript
JavaScript+CSS实现仿Mootools竖排弹性动画菜单效果
Oct 14 Javascript
javascript中call apply 与 bind方法详解
Mar 10 Javascript
jquery  实现轮播图详解及实例代码
Oct 12 Javascript
Angular工具方法学习
Dec 26 Javascript
jQuery 实现左右两侧菜单添加、移除功能
Jan 02 jQuery
js jquery 获取某一元素到浏览器顶端的距离实现方法
Sep 05 jQuery
JavaScript Tab菜单实现过程解析
May 13 Javascript
详解JavaScript 事件流
Sep 02 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
聊天室php&amp;mysql(二)
2006/10/09 PHP
fleaphp crud操作之find函数的使用方法
2011/04/23 PHP
PHP实现linux命令tail -f
2016/02/22 PHP
php生成复杂验证码(倾斜,正弦干扰线,黏贴,旋转)
2018/03/12 PHP
PHP7 echo和print语句实例用法
2019/02/15 PHP
PHP常量define和const的区别详解
2019/05/18 PHP
jQuery与ExtJS之选择实例分析
2010/08/19 Javascript
JavaScript中的数值范围介绍
2014/12/29 Javascript
JavaScript检查弹出窗口是否被阻拦的方法技巧
2015/03/13 Javascript
javascript实现checkbox全选的代码
2015/04/30 Javascript
给before和after伪元素设置js效果的方法
2015/12/04 Javascript
第一次接触神奇的前端框架vue.js
2016/12/01 Javascript
原生js实现对Ajax的封装(仿jquery)
2017/01/22 Javascript
Bootstrap table使用方法总结
2017/05/10 Javascript
jQuery 循环遍历改变a标签的href(实例讲解)
2017/07/12 jQuery
Vue中正确使用jQuery的方法
2017/10/30 jQuery
nodejs结合Socket.IO实现的即时通讯功能详解
2018/01/12 NodeJs
vue之将echart封装为组件
2018/06/02 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【凹多边形的分离轴检测算法】
2018/12/13 Javascript
微信小程序实现左滑动删除效果
2020/03/30 Javascript
JavaScript Array对象基本方法详解
2019/09/03 Javascript
Egg Vue SSR 服务端渲染数据请求与asyncData
2019/11/24 Javascript
在Vue中使用Echarts可视化库的完整步骤记录
2020/11/18 Vue.js
修改NPM全局模式的默认安装路径的方法
2020/12/15 Javascript
[05:26]2014DOTA2西雅图国际邀请赛 iG战队巡礼
2014/07/07 DOTA
Python运算符重载用法实例
2015/05/28 Python
Python基于socket模块实现UDP通信功能示例
2018/04/10 Python
pandas对dataFrame中某一个列的数据进行处理的方法
2019/07/08 Python
python 对任意数据和曲线进行拟合并求出函数表达式的三种解决方案
2020/02/18 Python
如何利用Python写个坦克大战
2020/11/18 Python
python上下文管理的使用场景实例讲解
2021/03/03 Python
PHP面试题附答案
2015/11/28 面试题
大学生创业项目方案
2014/03/08 职场文书
《苏珊的帽子》教学反思
2014/04/07 职场文书
小学二年级班主任工作经验交流材料
2015/11/02 职场文书
在 Golang 中实现 Cache::remember 方法详解
2021/03/30 Python