js实现将json数组显示前台table中

网络编程 2025-03-29 01:28www.168986.cn编程入门

假设您的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 += '' + obj[i].NVFID + ''; // 主键值,隐藏显示

trStr += '' + obj[i].USERCODE + ''; // 用户编号

trStr += '' + obj[i].USERNAME + ''; // 用户名称

trStr += '' + obj[i].USERPWD + ''; // 用户密码

trStr += '' + obj[i].PHONEIMEI + ''; // 手机号码

trStr += '' + obj[i].BMMC + ''; // 部门名称

// 在最后一列添加一个删除链接,用于删除当前行的数据

trStr += '删除';

trStr += ''; // 结束当前行的拼接

}

},

error: function (error) {

alert('请求失败: ' + error); // 如果请求失败,弹出错误提示

}

});

```

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by