|
本文通过Javascript实现在HTML中动态地增加、删除一行数据的功能,具体代码如下,附最终效果图:
<html>
<html>
<head>
<title>动态删除和增加 IT知道网itwis.com</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">
<!-- <tr><td>第一行</td><td>输入</td></tr> -->
</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>
效果图:
| 
