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图片轮播的具体实现
Sep 11 Javascript
深入分析Javascript事件代理
Jan 30 Javascript
js实现上一页下一页的效果【附代码】
Mar 10 Javascript
javascript表达式和运算符详解
Feb 07 Javascript
前端开发不得不知的10个最佳ES6特性
Aug 30 Javascript
Node.JS使用Sequelize操作MySQL的示例代码
Oct 09 Javascript
用js实现每隔一秒刷新时间的实例(含年月日时分秒)
Oct 25 Javascript
vue中使用element-ui进行表单验证的实例代码
Jun 22 Javascript
Vue异步组件处理路由组件加载状态的解决方案
Sep 07 Javascript
Angular resolve基础用法详解
Oct 03 Javascript
微信小程序实现点击图片放大预览
Oct 21 Javascript
node.js制作一个简单的登录拦截器
Feb 10 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
linux下为php添加curl扩展的方法
2011/07/29 PHP
PHP连接MSSQL时nvarchar字段长度被截断为255的解决方法
2014/12/25 PHP
thinkPHP删除前弹出确认框的简单实现方法
2016/05/16 PHP
PHP使用mysql与mysqli连接Mysql数据库用法示例
2016/07/07 PHP
PHP命名空间定义与用法实例分析
2019/08/14 PHP
用javascript实现给出的盒子的序列是否可连为一矩型
2007/08/30 Javascript
js中prototype用法详细介绍
2013/11/14 Javascript
javascript窗口宽高,鼠标位置,滚动高度(详细解析)
2013/11/18 Javascript
jquery转盘抽奖功能实现
2015/11/13 Javascript
JavaScript数组,JSON对象实现动态添加、修改、删除功能示例
2018/05/26 Javascript
vue3.0 CLI - 1 - npm 安装与初始化的入门教程
2018/09/14 Javascript
微信小程序实现滑动切换自定义页码的方法分析
2018/12/29 Javascript
微信小程序云开发使用方法新手初体验
2019/05/16 Javascript
vue中created和mounted的区别浅析
2019/08/13 Javascript
vue计算属性+vue中class与style绑定(推荐)
2020/03/30 Javascript
uni-app如何页面传参数的几种方法总结
2020/04/28 Javascript
Openlayers实现地图的基本操作
2020/09/28 Javascript
vue内置组件keep-alive事件动态缓存实例
2020/10/30 Javascript
[51:53]DOTA2-DPC中国联赛 正赛 RNG vs Dragon BO3 第二场 1月24日
2021/03/11 DOTA
python生成随机mac地址的方法
2015/03/16 Python
Python编程入门之Hello World的三种实现方式
2015/11/13 Python
django之常用命令详解
2016/06/30 Python
python 读取视频,处理后,实时计算帧数fps的方法
2018/07/10 Python
Python对接支付宝支付自实现功能
2019/10/10 Python
python GUI库图形界面开发之PyQt5控件数据拖曳Drag与Drop详细使用方法与实例
2020/02/27 Python
TUMI马来西亚官方网站:国际领先的高品质商旅箱包品牌
2018/04/26 全球购物
Berghaus官网:户外服装和设备,防水服
2020/01/17 全球购物
大学生文员专业个人求职信范文
2014/01/05 职场文书
机关副主任个人四风问题整改措施
2014/09/26 职场文书
师范生见习报告
2014/10/31 职场文书
2014年优秀班主任工作总结
2014/12/16 职场文书
小学生优秀评语
2014/12/29 职场文书
团干部培训班心得体会
2016/01/06 职场文书
小学教师教学反思
2016/02/24 职场文书
pandas 操作 Excel操作总结
2021/03/31 Python
解决MySQL存储时间出现不一致的问题
2021/04/28 MySQL