HTML 中动态增加、删除行的实现

最新推荐文章于 2022-04-29 10:08:56 发布

yanleigis

最新推荐文章于 2022-04-29 10:08:56 发布

阅读量2.2k

点赞数

分类专栏： javascript 文章标签： html button null function input

本文链接：https://blog.csdn.net/yanleigis/article/details/3137393

版权

javascript 专栏收录该内容

67 篇文章 0 订阅

订阅专栏

<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="新增一行" οnclick="addRow()"/>
<br>
<input type="text" id="delTextId" οnkeypress="if (event.keyCode < 45 || event.keyCode > 57) event.returnValue = false;"/>
<input type="button" value="删除选择行" οnclick="delRow()"/>
</body>
</html>
参考:http://blog.csdn.net/feng_cs/archive/2008/09/23/2966402.aspx

修改