本文介绍如何使用原生 JavaScript 动态向 HTML 表格中插入数据行，并实现点击按钮删除指定行的功能。通过遍历 JSON 数据生成表格行，并结合 DOM 操作完成增删交互，适用于需要前后端交互的简单场景。
JavaScript 动态向 HTML 表格添加与删除数据
利用 JavaScript 动态向表格中添加数据，实现方法其实并不复杂。下面将分享具体的实现步骤。
第一步，先编写表格的表头以及主干结构部分。
<table width="600" border="1" cellspacing="0">
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>职位</th>
<th>操作</th>
</tr>
</thead>
<tbody id="tbMain"></tbody>
</table> 第二步，向表格中填充数据，此处采用原生 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> 第三步，在网页环境中进行测试。
页面显示正常，点击删除按钮并确认，即可删除对应的表格行。
测试删除第二行，操作成功。
以上介绍了在 JavaScript 中动态向表格添加数据的方法，希望对大家有所帮助。如有任何疑问，欢迎留言，小编会及时回复。在此感谢大家对本站的支持！