js表格增加三行

在JavaScript中向表格增加三行，可以通过操作DOM（Document Object Model）来实现。以下是一个基础的示例代码，展示如何在HTML表格中动态添加三行数据：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS 添加表格行示例</title>
</head>
<body>

<table id="myTable" border="1">
  <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>城市</th>
  </tr>
  <!-- 初始的一行数据 -->
  <tr>
    <td>张三</td>
    <td>25</td>
    <td>北京</td>
  </tr>
</table>

<button onclick="addRows()">增加三行</button>

<script>
function addRows() {
  var table = document.getElementById("myTable");
  for (var i = 0; i < 3; i++) { // 循环三次，增加三行
    var row = table.insertRow(-1); // 在表格末尾插入新行
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);
    var cell3 = row.insertCell(2);
    cell1.innerHTML = "姓名" + (table.rows.length - 1); // 填充单元格数据
    cell2.innerHTML = Math.floor(Math.random() * 50) + 20; // 随机年龄
    cell3.innerHTML = "城市" + (table.rows.length - 1); // 填充单元格数据
  }
}
</script>

</body>
</html>

在这个示例中，我们有一个简单的表格和一个按钮。当点击按钮时，addRows函数会被触发。这个函数首先获取表格元素，然后通过一个循环来插入三行新的数据。每行数据包含三个单元格，分别代表姓名、年龄和城市。年龄字段使用了随机数生成，以展示动态数据。

优势：