最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
JavaScript中动态向表格添加数据
时间:2017-03-06 编辑:简简单单 来源:一聚教程网
利用JavaScript ,动态向表格中添加数据,其实方法很简单的,下面给大家分享下实现方法
1. 首先先写出表格的表头和主干部分
代码如下 | 复制代码 | ||||
|
2. 接下来就是网表格里面添加数据,这里用的是原生javascript
代码如下 | 复制代码 |
//模拟一段JSON数据,实际要从数据库中读取 varper = [ {id:001,name:'张珊',job:'学生'}, {id:002,name:'李斯',job:'教师'}, {id:003,name:'王武',job:'经理'} ]; window.onload =function(){ vartbody = document.getElementById('tbMain'); for(vari = 0;i < per.length; i++){//遍历一下json数据 vartrow = getDataRow(per[i]);//定义一个方法,返回tr数据 tbody.appendChild(trow); } } functiongetDataRow(h){ varrow = document.createElement('tr');//创建行 varidCell = document.createElement('td');//创建第一列id idCell.innerHTML = h.id;//填充数据 row.appendChild(idCell);//加入行 ,下面类似 varnameCell = document.createElement('td');//创建第二列name nameCell.innerHTML = h.name; row.appendChild(nameCell); varjobCell = document.createElement('td');//创建第三列job jobCell.innerHTML = h.job; row.appendChild(jobCell); //到这里,json中的数据已经添加到表格中,下面为每行末尾添加删除按钮 vardelCell = document.createElement('td');//创建第四列,操作列 row.appendChild(delCell); varbtnDel = 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,别忘了 returnrow;//返回tr数据 } |
3. 网页测试
显示成功,点击删除按钮,并确定即可删除这一行
删除第二行,可以!
-
上一个: Winform中进行MD5加密的实例
-
下一个: 浅谈C# winForm 窗体闪烁的问题
相关文章
- Javascript实现表格搜索数据的例子 07-12
- javascript数据结构与算法详解教程 10-18
- 用http/javascript调用腾迅股票数据接口 12-14
- C#复制数组的两种方式及效率比较解读 10-24
- ASP.NET Identity用法解析 10-24
- ASP.NET MVC使用Identity增删改查用户介绍 10-24