JavaScript中动态向表格添加数据利⽤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:'经理'}
];
var tbody = ElementById('tbMain');
for(var i = 0;i < per.length; i++){ //遍历⼀下json数据
var trow = getDataRow(per[i]); //定义⼀个⽅法，返回tr数据
tbody.appendChild(trow);
}
}
function getDataRow(h){
var row = ateElement('tr'); //创建⾏
var idCell = ateElement('td'); //创建第⼀列id
idCell.innerHTML = h.id; //填充数据
row.appendChild(idCell); //加⼊⾏，下⾯类似
var nameCell = ateElement('td');//创建第⼆列name
nameCell.innerHTML = h.name;
row.appendChild(nameCell);
javascript动态效果
var jobCell = ateElement('td');//创建第三列job
jobCell.innerHTML = h.job;
row.appendChild(jobCell);
//到这⾥，json中的数据已经添加到表格中，下⾯为每⾏末尾添加删除按钮
var delCell = ateElement('td');//创建第四列，操作列
row.appendChild(delCell);
var btnDel = ateElement('input'); //创建⼀个input控件
btnDel.setAttribute('type','button'); //type="button"
btnDel.setAttribute('value','删除');
//删除操作
if(confirm("确定删除这⼀⾏嘛？")){
//到按钮所在⾏的节点，然后删掉这⼀⾏
this.parentNode.veChild(this.parentNode.parentNode);
//btnDel - td - tr - tbody - 删除(tr)
//刷新⽹页还原。实际操作中，还要删除数据库中数据，实现真正删除
}
}
delCell.appendChild(btnDel); //把删除按钮加⼊td，别忘了
return row; //返回tr数据
}
</script>
3. ⽹页测试
显⽰成功，点击删除按钮，并确定即可删除这⼀⾏
删除第⼆⾏，可以！
以上所述是⼩编给⼤家介绍的JavaScript中动态向表格添加数据，希望对⼤家有所帮助，如果⼤家有任何疑问请给我留⾔，⼩编会及时回复⼤家的。在此也⾮常感谢⼤家对⽹站的⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。