答案：通过JavaScript操作DOM可实现HTML表格行的增删改。首先获取表格元素，使用insertRow()或createElement()创建新行，再用insertCell()或appendChild()添加单元格并填充内容，最后将行插入指定位置；可通过index参数在特定位置插入或删除行，清空表格则循环调用deleteRow()或直接设置innerHTML为空。
在HTML表格中添加行，主要依赖于JavaScript操作DOM。你可以通过
document.createElement()创建新的
<tr>元素，并使用
appendChild()将其添加到
<table>或
<tbody>中。
解决方案：
要向HTML表格添加行，你需要使用JavaScript来动态操作DOM。以下是一个详细的步骤和示例：
-
获取表格元素： 首先，你需要通过ID或其他方式获取到你的
<table>
元素。立即学习“前端免费学习笔记（深入）”；
var table = document.getElementById("yourTableId"); -
创建新的行元素 (tr)： 使用
document.createElement("tr")创建一个新的<tr>
元素。var newRow = table.insertRow(); // 或者 var newRow = document.createElement("tr"); -
创建单元格 (td)： 为新行创建单元格，并填充内容。
var cell1 = newRow.insertCell(0); // 或者 var cell1 = document.createElement("td"); var cell2 = newRow.insertCell(1); // 或者 var cell2 = document.createElement("td"); cell1.innerHTML = "内容1"; cell2.innerHTML = "内容2"; // 如果使用 createElement，需要手动将 cell 添加到 row // newRow.appendChild(cell1); // newRow.appendChild(cell2); -
将行添加到表格： 使用
appendChild()
方法将新行添加到表格的<tbody>
中。如果你使用了insertRow()
，这一步可以省略，因为它已经自动添加了。// 如果使用了 createElement 和 appendChild 创建单元格，需要将行添加到表格 // table.appendChild(newRow);
完整示例：
<!DOCTYPE html>
<html>
<head>
<title>添加表格行</title>
</head>
<body>
<table id="myTable">
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
</tr>
</tbody>
</table>
<button onclick="addRow()">添加行</button>
<script>
function addRow() {
var table = document.getElementById("myTable").getElementsByTagName('tbody')[0]; // 获取 tbody
var newRow = table.insertRow(table.rows.length); // 在末尾插入行
var cell1 = newRow.insertCell(0);
var cell2 = newRow.insertCell(1);
cell1.innerHTML = "New Row, Cell 1";
cell2.innerHTML = "New Row, Cell 2";
}
</script>
</body>
</html>如何在特定位置插入行？
可以使用
table.insertRow(index)方法。
index参数指定了新行应该插入的位置。例如，
table.insertRow(1)会在第二行（索引为1）插入新行。注意，如果索引大于现有行数，则会在表格末尾添加行。
如何删除表格行？
可以使用
table.deleteRow(index)方法。
index参数指定要删除的行的索引。例如，
table.deleteRow(1)会删除第二行。小心使用这个方法，特别是当表格数据是动态变化的时候。
如何清空表格的所有行？
一个简单的方法是循环删除所有行，除了表头。
var table = document.getElementById("myTable").getElementsByTagName('tbody')[0];
while (table.rows.length > 0) {
table.deleteRow(0); // 始终删除第一行，因为删除后索引会更新
}或者，更高效的方法是直接设置
tbody的
innerHTML为空字符串。
var table = document.getElementById("myTable").getElementsByTagName('tbody')[0];
table.innerHTML = ""; 
