在网页开发中，动态添加和删除表格行是常见的交互功能，尤其在数据管理或表单填写场景中。本文将详细讲解如何使用JavaScript实现这一功能。
我们需要一个HTML表格作为基础，这里有一个简单的表格结构：
```html
<table width="600px" border="1" cellpadding="0" cellspacing="0" id="myTab">
<tr>
<td width="40px" class="top-bt liebiao-c" align="center">操作</td>
<td width="40px" class="top-bt liebiao-c" align="center">序号</td>
<td class="top-bt liebiao-c" align="center">节点名称</td>
<td width="80px" class="top-bt liebiao-c" align="center">节点比例</td>
</tr>
</table>
```
此表格包含四列，分别用于显示操作、序号、节点名称和节点比例。接下来，我们将添加两个按钮，一个用于增加行，一个用于删除行：
```html
<input type="button" name="xx" onclick="addNewRow();" value="增加一行" />
<input type="button" name="yy" onclick="removeRow();" value="删除一行" />
```
现在，我们需要定义JavaScript函数来处理这两个按钮的点击事件。首先是`addNewRow()`函数，它负责在表格末尾插入新的一行，并为每一列填充相应的输入元素：
```javascript
function addNewRow() {
var tabObj = document.getElementById("myTab"); // 获取表格元素
var rowsNum = tabObj.rows.length; // 获取当前行数
var colsNum = tabObj.rows[rowsNum - 1].cells.length; // 获取行的列数
var myNewRow = tabObj.insertRow(rowsNum); // 插入新行
var newTdObj1 = myNewRow.insertCell(0);
newTdObj1.innerHTML = "<input type='checkbox' name='chkArr' id='chkArr" + rowsNum + "' style='width:20px' />";
var newTdObj2 = myNewRow.insertCell(1);
newTdObj2.innerHTML = "<input type='text' name='nodecode' id='nodecode" + rowsNum + "' style='width:40px' value='" + rowsNum + "'/>";
var newTdObj3 = myNewRow.insertCell(2);
newTdObj3.innerHTML = "<input type='text' name='nodename' id='nodename" + rowsNum + "' style='width:120px' />";
var newTdObj4 = myNewRow.insertCell(3);
newTdObj4.innerHTML = "<input type='text' name='nodeper' id='nodeper" + rowsNum + "' style='width:60px' />";
}
```
在这个函数中，我们通过`insertRow()`方法向表格添加新行，并使用`insertCell()`方法插入新的单元格。每个单元格的内容是不同的输入元素，如复选框（用于选择要删除的行）和文本输入框。
接着是`removeRow()`函数，它用于删除被选中的行：
```javascript
function removeRow() {
var chkObj = document.getElementsByName("chkArr"); // 获取所有复选框
var tabObj = document.getElementById("myTab"); // 获取表格元素
for (var k = 0; k < chkObj.length; k++) {
if (chkObj[k].checked) { // 如果复选框被选中
tabObj.deleteRow(k + 1); // 删除对应的行
k = -1; // 由于删除了行，需要重新遍历
}
}
}
```
这个函数首先获取所有名为`chkArr`的复选框，然后遍历它们。如果找到一个被选中的复选框，就使用`deleteRow()`方法删除其对应的行。注意，由于数组索引会在删除行后改变，所以需要在删除行后将索引重置为-1，以便重新开始遍历。
通过以上代码，我们就实现了动态添加和删除表格行的功能。用户可以通过点击“增加一行”按钮向表格添加新的数据行，也可以通过勾选复选框并点击“删除一行”按钮来移除选定的行。这个功能在需要用户输入多条数据的网页应用中非常实用，提高了用户体验。
