html get 数据填充表格
时间: 2023-12-20 08:07:47 浏览: 45
要实现将数据填充到 HTML 表格中,可以使用 JavaScript 来获取数据并将其动态地插入到表格中。以下是一个简单的示例代码:
HTML 代码:
```html
<table id="myTable">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
```
JavaScript 代码:
```javascript
// 模拟数据
var data = [
{ id: 1, name: 'John', age: 30 },
{ id: 2, name: 'Mary', age: 25 },
{ id: 3, name: 'Bob', age: 40 }
];
// 获取表格
var table = document.getElementById('myTable');
// 获取表格的 tbody
var tbody = table.getElementsByTagName('tbody')[0];
// 循环遍历数据,将数据填充到表格中
for (var i = 0; i < data.length; i++) {
// 创建一行 tr 元素
var row = document.createElement('tr');
// 创建三个列 td 元素,并将数据填充到其中
var idCell = document.createElement('td');
idCell.innerHTML = data[i].id;
row.appendChild(idCell);
var nameCell = document.createElement('td');
nameCell.innerHTML = data[i].name;
row.appendChild(nameCell);
var ageCell = document.createElement('td');
ageCell.innerHTML = data[i].age;
row.appendChild(ageCell);
// 将这一行添加到表格的 tbody 中
tbody.appendChild(row);
}
```
这段代码会将数据填充到表格中,并且会根据数据的数量动态地添加行。你可以根据自己的需要进行修改和扩展。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.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)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)