js实现将json数组显示前台table中
时间: 2024-03-06 22:46:55 浏览: 15
你可以使用JavaScript先将JSON数组转成HTML表格的形式,然后再将表格添加到前台页面中。
以下是一个例子:
1. HTML代码
```html
<table id="myTable">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>城市</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
```
2. JavaScript代码
```javascript
var data = [
{"name": "张三", "age": 20, "city": "北京"},
{"name": "李四", "age": 25, "city": "上海"},
{"name": "王五", "age": 28, "city": "广州"}
];
var table = document.getElementById("myTable");
// 添加表格内容
for (var i = 0; i < data.length; i++) {
var row = table.insertRow(i + 1);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
cell1.innerHTML = data[i].name;
cell2.innerHTML = data[i].age;
cell3.innerHTML = data[i].city;
}
```
以上代码将JSON数组数据动态地添加到了HTML表格中,你可以根据实际需求修改代码。