javascript table 增加删除行

最新推荐文章于 2023-08-16 13:43:22 发布

原创最新推荐文章于 2023-08-16 13:43:22 发布 · 111 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript #Java #ViewUI

JavaScript 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了一种使用JavaScript操作HTML表格的方法，通过简单的代码实现了表格行的动态添加与删除功能。该方法适用于需要用户交互修改表格内容的应用场景。

<html>
<head>
<script type="text/javascript">
function deleteRow(r)
{
var i=r.parentNode.parentNode.rowIndex
document.getElementById('myTable').deleteRow(i)
}

function insertRowInTable(){
var table = document.getElementById("myTable");
var newRow = table.insertRow(-1);
newRow.insertCell().innerHTML = newRow.rowIndex;
newRow.insertCell(-1).innerHTML = "<input type='button' value='删除' onclick='deleteRow(this)'>";
}
</script>
</head>
<body>

<table id="myTable" border="1">
<tr>
<td>Row 1</td>
<td><input type="button" value="删除" onclick="deleteRow(this)"></td>
</tr>
<tr>
<td>Row 2</td>
<td><input type="button" value="删除" onclick="deleteRow(this)"></td>
</tr>
<tr>
<td>Row 3</td>
<td><input type="button" value="删除" onclick="deleteRow(this)"></td>
</tr>
</table>
<input type="button" onclick="insertRowInTable();" value="插入一行" />
</body>
</html>