通过js动态更新table里面数据
时间: 2023-12-08 17:05:25 浏览: 163
jQuery实现动态更改table表格数据
4星 · 用户满意度95%
您可以使用JavaScript来动态更新HTML表格中的数据。以下是一个示例代码,演示了如何使用JavaScript动态更新表格数据:
HTML部分:
```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>
```
JavaScript部分:
```javascript
// 获取表格
var table = document.getElementById("myTable");
// 创建新的行和单元格
var newRow = table.insertRow();
var nameCell = newRow.insertCell();
var ageCell = newRow.insertCell();
// 设置新行的数据
nameCell.innerHTML = "王五";
ageCell.innerHTML = "28";
```
上述代码首先通过`getElementById`方法获取到表格元素,然后使用`insertRow`方法在表格中创建新的行,再使用`insertCell`方法在新行中创建单元格。最后,通过修改单元格的`innerHTML`属性,将新的数据赋值给单元格。
通过这种方式,您可以根据需要使用JavaScript动态更新表格中的数据。
阅读全文