数组写入table html,把数组里的数据在html table 里展现出来
时间: 2023-10-12 10:12:17 浏览: 38
可以使用JavaScript将数组中的数据写入HTML表格中。首先,需要在HTML中创建一个table元素和一个tbody元素作为表格主体。然后,使用JavaScript遍历数组,并将数据插入到表格中。以下是一个示例代码:
HTML代码:
```
<table>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
</thead>
<tbody id="table-body">
</tbody>
</table>
```
JavaScript代码:
```
// 示例数组
var people = [
{ name: '张三', age: 18, gender: '男' },
{ name: '李四', age: 20, gender: '女' },
{ name: '王五', age: 22, gender: '男' }
];
// 获取表格主体元素
var tbody = document.getElementById('table-body');
// 遍历数组
for (var i = 0; i < people.length; i++) {
var person = people[i];
// 创建行元素
var row = document.createElement('tr');
// 创建单元格元素并插入数据
var nameCell = document.createElement('td');
nameCell.innerText = person.name;
row.appendChild(nameCell);
var ageCell = document.createElement('td');
ageCell.innerText = person.age;
row.appendChild(ageCell);
var genderCell = document.createElement('td');
genderCell.innerText = person.gender;
row.appendChild(genderCell);
// 将行元素插入表格主体
tbody.appendChild(row);
}
```
这段代码会将示例数组中的数据插入到表格中,并在网页上展现出来。