HTML 中动态增加、删除行的实现-优快云博客

本文介绍了一种使用JavaScript实现HTML表格动态增删行的方法。通过两个按钮分别完成新增和删除行的功能，新增行时可在表格中加入新的输入框，删除行则需指定要删除的行号。这种方式适用于需要频繁更新表格内容的应用场景。

<html>
<html>
<head>
<title>动态删除和增加</title>
<script type="text/javascript">
function addRow() {
var tb = document.getElementById("mytableid");
var rnum = tb.rows.length+1;

var row = tb.insertRow();
var cell = row.insertCell();
cell.innerText = "第" + rnum + "行";
cell = row.insertCell();
cell.innerHTML = "<input type='text' value = '新一行'>";
}

function delRow() {
var tb = document.getElementById("mytableid");
var rowIndex = document.getElementById("delTextId").value;
if (rowIndex==null || rowIndex=='')
{
alert("输入删除的行");
return null;

}

var rnum=tb.rows.length;

if (rnum==0)
{
alert("没有删除的行");
return null;
}
if (rowIndex>rnum)
{
alert("删除的"+rowIndex+",大于表的列数");
return null;
}
if (rowIndex>0)
{

tb.deleteRow(rowIndex-1);
}
}
</script>

</head>

<body>
<table id="mytableid">

</table>
<input type="button" value="新增一行" onclick="addRow()"/>
<br>
<input type="text" id="delTextId" onkeypress="if (event.keyCode < 45 || event.keyCode > 57) event.returnValue = false;"/>
<input type="button" value="删除选择行" onclick="delRow()"/>
</body>
</html>
参考:http://blog.youkuaiyun.com/feng_cs/archive/2008/09/23/2966402.aspx

修改