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 相关文章推荐
javascript字符串拼接的效率问题
Dec 25 Javascript
基于jquery的loading 加载提示效果实现代码
Sep 01 Javascript
JS字符串函数扩展代码
Sep 13 Javascript
JavaScript实现的一个计算数字步数的算法分享
Dec 06 Javascript
jQuery实现的鼠标经过时变宽的效果(附demo源码)
Apr 28 Javascript
js实现带缓动动画的导航栏效果
Jan 16 Javascript
vue2.0数据双向绑定与表单bootstrap+vue组件
Feb 27 Javascript
学习使用Bootstrap页面排版样式
May 11 Javascript
简单谈谈require模块化jquery和angular的问题
Jun 23 jQuery
Vue中建立全局引用或者全局命令的方法
Aug 21 Javascript
详解vue-cli脚手架build目录中的dev-server.js配置文件
Nov 24 Javascript
vue计算属性+vue中class与style绑定(推荐)
Mar 30 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
苏联队长,苏联超人蝙蝠侠,这些登场的“山寨”英雄真的很严肃
2020/04/09 欧美动漫
浅谈php数组array_change_key_case() 函数和array_chunk()函数
2016/10/22 PHP
Javascript 个人笔记(没有整理,很乱)
2007/07/07 Javascript
js输出列表实现代码
2010/09/12 Javascript
jcarousellite.js 基于Jquery的图片无缝滚动插件
2010/12/30 Javascript
lyhucSelect基于Jquery的Select数据联动插件
2011/03/29 Javascript
在表单提交前进行验证的几种方式整理
2013/07/31 Javascript
jQuery表格列宽可拖拽改变且兼容firfox
2014/09/03 Javascript
jQuery选择器之基本选择器与层次选择器
2015/03/03 Javascript
jQuery解决input元素的blur事件和其他非表单元素的click事件冲突问题
2016/08/15 Javascript
Angular中封装fancyBox(图片预览)遇到问题小结
2017/09/01 Javascript
ReactNative 之FlatList使用及踩坑封装总结
2017/11/29 Javascript
js实现页面图片消除效果
2020/03/24 Javascript
Python版实现微信公众号扫码登陆
2020/05/28 Javascript
微信小程序之导航滑块视图容器功能的实现代码(简单两步)
2020/06/19 Javascript
Nest.js环境变量配置与序列化详解
2021/02/21 Javascript
Python两个内置函数 locals 和globals(学习笔记)
2016/08/28 Python
python图像常规操作
2017/11/11 Python
使用pandas模块读取csv文件和excel表格,并用matplotlib画图的方法
2018/06/22 Python
浅析Python 3 字符串中的 STR 和 Bytes 有什么区别
2018/10/14 Python
PyCharm的设置方法和第一个Python程序的建立
2019/01/16 Python
python3.7 的新特性详解
2019/07/25 Python
解决使用export_graphviz可视化树报错的问题
2019/08/09 Python
Python PyPDF2模块安装使用解析
2020/01/19 Python
如何利用Python动态模拟太阳系运转
2020/09/04 Python
css3制作动态进度条以及附加jQuery百分比数字显示
2012/12/13 HTML / CSS
详解canvas多边形(蜘蛛图)的画法示例
2018/01/29 HTML / CSS
电气工程及其自动化自我评价四篇
2013/09/24 职场文书
中专生求职自荐信范文
2013/12/22 职场文书
物业总经理岗位职责
2014/02/28 职场文书
计算机专业毕业生求职信
2014/04/30 职场文书
产品生产计划书
2014/05/07 职场文书
红领巾广播站广播稿(3篇)
2014/09/20 职场文书
常务副县长“四风”个人对照检查材料思想汇报
2014/10/02 职场文书
公司劳动纪律管理制度
2015/08/04 职场文书
JS 基本概念详细介绍
2021/10/16 Javascript