js实现将json数组显示前台table中
假设您的JSON数据格式如下:
```json
{
"data": [
{"id": 1, "name": "张三", "age": 25},
{"id": 2, "name": "李四", "age": 30},
// 更多数据...
]
}
```
接下来,您可以按照以下步骤操作:
1. JSON数据:首先确保您获取的JSON字符串是规范的,然后使用`JSON.parse()`方法将其为JavaScript对象。
具体的实现代码如下(以JavaScript为例):
```javascript
// 假设jsonData是已经好的JSON对象
var thead = document.createElement('thead'); // 表头
var tbody = document.createElement('tbody'); // 表体
// 假设jsonData.data是包含数据的数组
for (var i = 0; i < jsonData.data.length; i++) {
var row = document.createElement('tr'); // 创建行
var cells = jsonData.data[i]; // 获取当前对象(行数据)
for (var key in cells) { // 遍历对象属性(单元格数据)
var cell = document.createElement('td'); // 创建单元格
cell.textContent = cells[key]; // 设置单元格内容
row.appendChild(cell); // 将单元格添加到行中
}
tbody.appendChild(row); // 将行添加到表体中
}
table.appendChild(thead); // 添加表头(此处可根据需要添加表头元素)
document.getElementById('yourDivId').appendChild(table);
```
一、前台JS代码(假定已引入JQuery库)
```javascript
$.ajax({
type: "GET",
url: "UserList.ashx?Action=List", // 向后台请求数据
success: function (result) { // result为后台返回的JSON字符串
var obj = JSON.parse(result); // JSON字符串为JSON对象
for (var i = 0; i < obj.length; i++) { // 循环遍历JSON对象中的每一个数据
trStr += '
'; // 主键值,隐藏显示trStr += '
trStr += '
trStr += '
trStr += '
trStr += '
// 在最后一列添加一个删除链接,用于删除当前行的数据
trStr += '
trStr += ''; // 结束当前行的拼接
}
},
error: function (error) {
alert('请求失败: ' + error); // 如果请求失败,弹出错误提示
}
});
```