JavaScript动态添加与删除表格行的完整实现

作者:像素漫游

时间:2026-10-27

浏览:486

本文提供使用JavaScript动态添加和删除HTML表格行的完整代码示例。通过insertRow和deleteRow方法实现行的增删,包含复选框选择删除功能,适用于需要动态管理表格数据的Web开发场景。

文章目录

JavaScript动态添加与删除表格行代码

具体实现代码如下所示:

<html>
<head>
<script language="javascript">
// 定义向表格新增行的函数
function addNewRow(){
var tabObj=document.getElementById("myTab");// 获取目标表格对象
var rowsNum = tabObj.rows.length; // 获取当前表格总行数
var colsNum=tabObj.rows[rowsNum-1].cells.length;// 获取最后一行的列数
var myNewRow = tabObj.insertRow(rowsNum);// 在指定位置插入新行
var newTdObj1=myNewRow.insertCell(0);
newTdObj1.innerHTML="<input type='checkbox' name='chkArr' id='chkArr'"+rowsNum+" style='width:20px' />";
var newTdObj2=myNewRow.insertCell(1);
newTdObj2.innerHTML="<input type='text' name='nodecode' id='nodecode'"+rowsNum+" style='width:40px' value='"+rowsNum+"'/>";
var newTdObj3=myNewRow.insertCell(2);
newTdObj3.innerHTML="<input type='text' name='nodename' id='nodename'"+rowsNum+" style='width:120px' />";
var newTdObj4=myNewRow.insertCell(3);
newTdObj4.innerHTML="<input type='text' name='nodeper' id='nodeper'"+rowsNum+" style='width:60px' />";
  }
// 定义删除选中行的函数
function removeRow(){
var chkObj=document.getElementsByName("chkArr");
var tabObj=document.getElementById("myTab");
for(var k=0;k<chkObj.length;k++){
if(chkObj[k].checked){
tabObj.deleteRow(k+1);
k=-1;
    }
   }
  }
</script>
</head>
<body>
<input type="button" name="xx" onclick="addNewRow();" value="增加一行" />
<input type="button" name="yy" onclick="removeRow();" value="删除一行" />
<table width="600px" border="1" cellpadding="0" cellspacing="0" id="myTab">
<tr>
<td width="40px" class="top-bt liebiao-c" align="center" >操作</td>
<td width="40px" class="top-bt liebiao-c" align="center" >序号</td>
<td class="top-bt liebiao-c" align="center" >节点名称</td>
<td width="80px" class="top-bt liebiao-c" align="center" >节点比例</td>
</tr>
</table>
</body>
</html>

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章