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滚动字幕效果实现代码
Jun 22 Javascript
使用javascipt---实现二分查找法
Apr 10 Javascript
使用JS+plupload直接批量上传图片到又拍云
Dec 01 Javascript
JS验证 只能输入小数点,数字,负数的实现方法
Oct 07 Javascript
JavaScript中 DOM操作方法小结
Apr 25 Javascript
vuex中使用对象展开运算符的示例
Sep 25 Javascript
vue2 前端搜索实现示例
Feb 26 Javascript
js canvas实现红包照片效果
Aug 21 Javascript
vue中使用gojs/jointjs的示例代码
Aug 24 Javascript
js中arguments对象的深入理解
May 14 Javascript
通过扫小程序码实现网站登陆功能
Aug 22 Javascript
详解Nuxt.js中使用Element-UI填坑
Sep 06 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通过cookies获取远程网页的指定代码
2013/06/25 PHP
PHP大文件切割上传功能实例分析
2019/07/01 PHP
ExtJS 2.0实用简明教程 之ExtJS版的Hello
2009/04/29 Javascript
jquery ready()的几种实现方法小结
2010/06/18 Javascript
js下利用控制器载入对应脚本
2010/07/17 Javascript
javascript中setTimeout的问题解决方法
2014/05/08 Javascript
JS iFrame加载慢怎么解决
2016/05/13 Javascript
基于Vue2实现的仿手机QQ单页面应用功能(接入聊天机器人 )
2017/03/30 Javascript
详解Node.js中exports和module.exports的区别
2017/04/19 Javascript
获取本机IP地址的实例(JavaScript / Node.js)
2017/11/24 Javascript
jQuery实现点击DIV同时点击CheckBox,并为DIV上背景色的实例
2017/12/18 jQuery
react在安卓中输入框被手机键盘遮挡问题的解决方法
2018/09/03 Javascript
Nodejs使用archiver-zip-encrypted库加密压缩文件时报错(解决方案)
2019/11/18 NodeJs
[02:40]DOTA2英雄基础教程 巨牙海民
2013/12/23 DOTA
Python通过poll实现异步IO的方法
2015/06/04 Python
Python实现统计代码行的方法分析
2017/07/12 Python
python机器学习之KNN分类算法
2018/08/29 Python
Python GUI布局尺寸适配方法
2018/10/11 Python
浅析python的优势和不足之处
2018/11/20 Python
Python基于plotly模块实现的画图操作示例
2019/01/23 Python
Python API自动化框架总结
2019/11/12 Python
简单了解python数组的基本操作
2019/11/26 Python
使用TensorFlow直接获取处理MNIST数据方式
2020/02/10 Python
DC Shoes官网:美国滑板鞋和服饰品牌
2017/09/03 全球购物
亿企通软件测试面试题
2012/04/10 面试题
学校元旦晚会方案
2014/02/19 职场文书
古汉语文学求职信范文
2014/03/16 职场文书
小学作文评语大全
2014/04/21 职场文书
励志演讲稿500字
2014/08/21 职场文书
党员干部反四风对照检查材料思想汇报
2014/09/14 职场文书
银行员工犯错检讨书
2014/09/16 职场文书
2014年教务工作总结
2014/12/03 职场文书
年底个人总结范文
2015/03/10 职场文书
2016领导干部廉洁从政心得体会
2016/01/19 职场文书
2016应届毕业生自荐信范文
2016/01/28 职场文书
Hive导入csv文件示例
2022/06/25 数据库