javascript onclick 将新行追加到表中 - Javascript (1)

📌 相关文章

📜 javascript onclick 将新行追加到表中 - Javascript (1)

📅 最后修改于: 2023-12-03 15:16:06.289000 🧑 作者: Mango

JavaScript onClick将新行追加到表中 - JavaScript

在JavaScript中，可以使用onClick事件将新行追加到HTML表格中。这种技术通常用于动态添加表格行或响应用户的点击操作。

以下是一个示例代码片段，展示了如何使用JavaScript的onClick事件将新行追加到表格中：

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript onClick添加表格行</title>
</head>
<body>

<button onclick="addTableRow()">添加行</button>

<table id="myTable">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>30</td>
    </tr>
    <tr>
      <td>Jane</td>
      <td>25</td>
    </tr>
  </tbody>
</table>

<script>
function addTableRow() {
  var table = document.getElementById("myTable");
  var row = table.insertRow(table.rows.length);

  var cell1 = row.insertCell(0);
  var cell2 = row.insertCell(1);

  cell1.innerHTML = "New Name";
  cell2.innerHTML = "New Age";
}
</script>

</body>
</html>

在上述代码中，我们首先创建了一个包含按钮和一个具有id="myTable"的表格的基本HTML结构。在JavaScript部分，我们定义了一个名为addTableRow的函数，并将其绑定到按钮的onClick事件上。

addTableRow函数首先通过getElementById方法获取到ID为"myTable"的表格。然后，使用insertRow方法在表格的最后一行之后插入一个新的表格行。接下来，我们使用insertCell方法在新行中插入两个单元格。最后，我们通过innerHTML属性设置每个单元格的内容为"New Name"和"New Age"。

运行该代码，当用户点击"添加行"按钮时，将在表格的末尾添加一个新的行，其中包含"New Name"和"New Age"两列数据。

希望以上代码能帮助你理解如何使用JavaScript的onClick事件将新行追加到表格中。