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实现的支持lrc歌词的播放器
May 17 Javascript
javascript String 的扩展方法集合
Jun 01 Javascript
JS获取农历日期具体实例
Nov 14 Javascript
js限制文本框只能输入数字方法小结
Jun 16 Javascript
node.js入门实例helloworld详解
Dec 23 Javascript
jQuery实现的分子运动小球碰撞效果
Jan 27 Javascript
jQuery日历插件datepicker用法详解
Mar 03 Javascript
JS中JSON对象和String之间的互转及处理技巧
Apr 06 Javascript
D3.js实现饼状图的方法详解
Sep 21 Javascript
兼容浏览器的js事件绑定函数(详解)
May 09 Javascript
node.js 核心http模块,起一个服务器,返回一个页面的实例
Sep 11 Javascript
zTree树形菜单交互选项卡效果的实现方法
Dec 25 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 日期操作小记
2012/02/27 PHP
PHP基于mssql扩展远程连接MSSQL的简单实现方法
2016/10/08 PHP
js脚本学习 比较实用的基础
2006/09/07 Javascript
document.documentElement的一些使用技巧
2013/04/18 Javascript
jQuery的DOM操作之删除节点示例
2014/01/03 Javascript
jsp网页搜索结果中实现选中一行使其高亮
2014/02/17 Javascript
JavaScript对象的property属性详解
2014/04/01 Javascript
js鼠标点击图片实现随机变换图片的方法
2015/02/16 Javascript
使用npm发布Node.JS程序包教程
2015/03/02 Javascript
JavaScript人脸识别技术及脸部识别JavaScript类库Tracking.js
2015/09/14 Javascript
JS验证逗号隔开可以是中文字母数字
2016/04/22 Javascript
js修改onclick动作的四种方法(推荐)
2016/08/18 Javascript
JSON对象 详解及实例代码
2016/10/18 Javascript
jQuery.datatables.js插件用法及api实例详解
2016/10/28 Javascript
详解Vue中的自定义指令
2020/12/07 Vue.js
使用Python的Twisted框架编写简单的网络客户端
2015/04/16 Python
python 中random模块的常用方法总结
2017/07/08 Python
Tensorflow 训练自己的数据集将数据直接导入到内存
2018/06/19 Python
Selenium定时刷新网页的实现代码
2018/10/31 Python
pygame游戏之旅 按钮上添加文字的方法
2018/11/21 Python
python实现Dijkstra静态寻路算法
2019/01/17 Python
对Django项目中的ORM映射与模糊查询的使用详解
2019/07/18 Python
pip install python 快速安装模块的教程图解
2019/10/08 Python
Python TestSuite生成测试报告过程解析
2020/07/23 Python
css3media响应式布局实例
2016/07/08 HTML / CSS
诗狄娜化妆品官方网站:Stila Cosmetics
2016/12/21 全球购物
JAVA高级程序员面试题
2013/09/06 面试题
cf收人广告词
2014/03/14 职场文书
仓库管理计划书
2014/05/04 职场文书
酒店七夕情人节活动策划方案
2014/08/24 职场文书
党员批评与自我批评材料
2014/10/14 职场文书
资产运营委托书范本
2014/10/16 职场文书
2014年学生资助工作总结
2014/12/18 职场文书
个人总结怎么写
2015/02/26 职场文书
病危通知书样本
2015/04/17 职场文书
信息技术课教学反思
2016/02/23 职场文书