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

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

iteye_7597

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

阅读量317

点赞数

文章标签： HTML JavaScript C C++ C# ViewUI

本文介绍了一种使用JavaScript和HTML DOM操作实现动态增加和删除表格行的方法。通过insertRow()和deleteRow()方法，可以轻松地对网页上的表格进行动态管理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

用到了HTML的DOM对象。

主要是insertRow(), insertCell(), deleteRow()方法的使用。

<html>

<head>

<title>addrow.html</title>

<scripttype="text/javascript">

varnum=1;
functionaddRow(){

vartb=document.getElementById("mytableid");

varrow=tb.insertRow();

varcell=row.insertCell();

cell.innerText="第"+num+"行";
num++;

cell=row.insertCell();

cell.innerHTML="<inputtype='text'value='新一行'>";
}
functiondelRow(){

varrowIndex=document.getElementById("delTextId").value;

vartb=document.getElementById("mytableid");
tb.deleteRow(rowIndex-1);
}

</script>

</head>

<body>

<tableid="mytableid">

<!--<tr><td>第一行</td><td>输入</td></tr>-->

</table>

<inputtype="button"value="新增一行"onclick="addRow()"/>

<br>

<inputtype="text"id="delTextId"/>

<inputtype="button"value="删除选择行"onclick="delRow()"/>

</body>

</html>