通过js动态更新table里面数据详细示例

当需要动态更新表格数据时，可以使用JavaScript来实现。下面是一个详细的示例，展示了如何使用JavaScript动态更新表格数据。

HTML部分：

<table id="myTable">
  <tr>
    <th>姓名</th>
    <th>年龄</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>25</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>30</td>
  </tr>
</table>

<button onclick="addRow()">添加行</button>
<button onclick="updateData()">更新数据</button>

JavaScript部分：

// 获取表格
var table = document.getElementById("myTable");

// 添加行
function addRow() {
  var newRow = table.insertRow();
  var nameCell = newRow.insertCell();
  var ageCell = newRow.insertCell();
  
  nameCell.innerHTML = "王五";
  ageCell.innerHTML = "28";
}

// 更新数据
function updateData() {
  // 获取表格中所有行（除了表头）
  var rows = table.rows;
  
  // 遍历每一行，更新数据
  for (var i = 1; i < rows.length; i++) {
    var nameCell = rows[i].cells[0];
    var ageCell = rows[i].cells[1];
    
    // 使用随机数生成新的数据
    var randomAge = Math.floor(Math.random() * 50) + 20;
    
    nameCell.innerHTML = "姓名 " + i;
    ageCell.innerHTML = randomAge;
  }
}

在上述示例中，我们首先通过`getElementById`方法获取到表格元素。然后，定义了两个函数：`addRow`和`updateData`。

`addRow`函数用于添加新的行到表格中。它使用`insertRow`和`insertCell`方法创建新行和单元格，并使用`innerHTML`属性设置单元格的内容。

`updateData`函数用于更新表格中的数据。它首先通过`table.rows`获取到表格中的所有行（除了表头），然后使用循环遍历每一行。在每一行中，它使用随机数生成新的年龄数据，并将新的数据赋值给相应的单元格。

最后，在HTML部分，我们添加了两个按钮，分别用于调用`addRow`和`updateData`函数。当点击这两个按钮时，将触发相应的JavaScript函数，从而实现动态更新表格数据。

您可以根据需要修改这个示例，以满足具体的动态更新表格数据的需求。