js 表格增加行

在JavaScript中，向表格增加行的基本方法是操作DOM（Document Object Model）。以下是具体的步骤和相关概念：

基本概念

DOM：文档对象模型，是HTML和XML文档的编程接口。它提供了对文档的结构化的表示，并定义了访问和操作文档的方式。
Node：DOM树中的每一个元素都是一个节点。
Element：元素节点，代表HTML中的一个标签。
appendChild()：这是一个DOM方法，用于将一个节点添加到指定父节点的子节点列表的末尾。

优势

动态更新：可以在不重新加载页面的情况下更新页面内容。
用户体验好：提高了页面的交互性和响应速度。

类型

客户端脚本：直接在用户的浏览器上运行。
服务器端脚本：在服务器上运行，然后将结果发送到客户端。

应用场景

动态生成表格数据，如从服务器获取数据后展示。
用户交互操作，如点击按钮添加一行数据。

示例代码

假设我们有一个简单的HTML表格和一个按钮，点击按钮时向表格中添加一行：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS Add Row Example</title>
</head>
<body>

<table id="myTable" border="1">
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>John Doe</td>
    <td>30</td>
  </tr>
</table>

<button onclick="addRow()">Add Row</button>

<script>
function addRow() {
  // 获取表格元素
  var table = document.getElementById("myTable");
  
  // 创建新的行元素
  var row = table.insertRow(-1); // 在表格的最后插入新行
  
  // 创建新的单元格并添加到新行
  var cell1 = row.insertCell(0);
  var cell2 = row.insertCell(1);
  
  // 设置单元格的内容
  cell1.innerHTML = "New Name";
  cell2.innerHTML = "25";
}
</script>

</body>
</html>