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">
<!-- <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>
参考:http://blog.csdn.net/feng_cs/archive/2008/09/23/2966402.aspx

修改

你可能感兴趣的:(html,function,null,input,button)