现在有一个table,然后table里面的每一行都是一组数据,如何动态的进行数据添加‘
时间: 2024-02-03 10:14:08 浏览: 112
如果你的table是指HTML表格,那么可以通过JavaScript动态地向表格中添加数据。以下是一些示例代码:
1. 使用innerHTML属性向表格中添加一行数据:
HTML代码:
```html
<table id="myTable">
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
</table>
<button onclick="addRow()">添加数据</button>
```
JavaScript代码:
```javascript
function addRow() {
var table = document.getElementById("myTable");
var row = table.insertRow();
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
cell1.innerHTML = "张三";
cell2.innerHTML = "20";
}
```
2. 使用createElement方法动态创建表格行和单元格:
HTML代码:
```html
<table id="myTable">
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
</table>
<button onclick="addRow()">添加数据</button>
```
JavaScript代码:
```javascript
function addRow() {
var table = document.getElementById("myTable");
var row = document.createElement("tr");
var cell1 = document.createElement("td");
var cell2 = document.createElement("td");
cell1.innerHTML = "张三";
cell2.innerHTML = "20";
row.appendChild(cell1);
row.appendChild(cell2);
table.appendChild(row);
}
```
以上两种方法都是通过JavaScript向表格中动态添加一行数据。你可以根据需要修改代码来添加多行数据。
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)