js table 添加一行

在JavaScript中，向表格（table）添加一行通常涉及以下步骤：

基础概念

HTML Table: 表格由<table>元素定义，行由<tr>元素定义，单元格由<td>（数据单元格）或<th>（表头单元格）元素定义。
DOM操作: JavaScript通过Document Object Model (DOM) API来操作HTML文档的结构。

类型与应用场景

静态表格: 初始页面加载时就已经确定的表格。
动态表格: 内容根据用户操作或后台数据实时更新的表格，如数据列表、搜索结果等。

示例代码

以下是一个简单的示例，展示如何在现有的HTML表格中添加一行：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Table 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>
<br>
<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 = "Jane Doe"; // 设置第一个单元格的内容
  cell2.innerHTML = "25"; // 设置第二个单元格的内容
}
</script>

</body>
</html>