JS将数据绑定到页面中做成列表 30
* 练习将数据绑定到页面中
* userList是一个数组，里面有3个对象，每个对象中包含一些值,其中：
* nickname：字符串 姓名
* user：对象 里面是用户信息，里面的htcode是用户名
* telephone：字符串 电话号码
*/
var userList = [{
"nickname": "lizeze",
"user": {"safemobile": "13000000000", "htcode": "lize123", "gravatar": null, "skin_id": null, "email": null},
"telephone": "13000000000",
"employee_id": "ba5bb7a8a15c11e986c00242c0a88003",
}, {
"nickname": "\u7533\u5c0f\u4e3d",
"user": {"safemobile": "13940000000", "htcode": "cloudass", "gravatar": null, "skin_id": null, "email": null},
"telephone": "13940000000",
"employee_id": "2fca26bca15a11e9a21f0242c0a88003",
}, {
"nickname": "wym001",
"user": {"safemobile": "17600000000", "htcode": "wym001", "gravatar": null, "skin_id": null, "email": null},
"telephone": "17600000000",
"employee_id": "0158b1069ca811e9be780242c0a88003",
}]; 展开
望采纳
结果：
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table border="1"; style="width: 80%; margin: auto;" id="user_table">
<tr>
<th rowspan="2">姓名</th>
<th rowspan="2">手机号码</th>
<th rowspan="2">员工id</th>
<th colspan="5">用户信息</th>
</tr>
<tr>
<th>safemobile</th>
<th>用户名</th>
<th>gravatar</th>
<th>skin_id</th>
<th>email</th>
</tr>
</table>
<script>
/**
* 练习将数据绑定到页面中
* userList是一个数组，里面有3个对象，每个对象中包含一些值,其中：
* nickname：字符串 姓名
* user：对象 里面是用户信息，里面的htcode是用户名
* telephone：字符串 电话号码
*/
var userList = [{
"nickname": "lizeze",
"user": {"safemobile": "13000000000", "htcode": "lize123", "gravatar": null, "skin_id": null, "email": null},
"telephone": "13000000000",
"employee_id": "ba5bb7a8a15c11e986c00242c0a88003",
}, {
"nickname": "\u7533\u5c0f\u4e3d",
"user": {"safemobile": "13940000000", "htcode": "cloudass", "gravatar": null, "skin_id": null, "email": null},
"telephone": "13940000000",
"employee_id": "2fca26bca15a11e9a21f0242c0a88003",
}, {
"nickname": "wym001",
"user": {"safemobile": "17600000000", "htcode": "wym001", "gravatar": null, "skin_id": null, "email": null},
"telephone": "17600000000",
"employee_id": "0158b1069ca811e9be780242c0a88003",
}];
var html='';
for (var user of userList){
(function (user) {
html += ' <tr>\n' +
' <td>'+user.nickname+'</td>\n' +
' <td>'+user.telephone+'</td>\n' +
' <td>'+user.employee_id+'</td>\n' +
' <td>'+user.user.safemobile+'</td>\n' +
' <td>'+user.user.htcode+'</td>\n' +
' <td>'+user.user.gravatar+'</td>\n' +
' <td>'+user.user.skin_id+'</td>\n' +
' <td>'+user.user.email+'</td>\n' +
' </tr>'
})(user);
}
var table = document.getElementById("user_table");
var srcHtml = table.innerHTML ;
table.innerHTML = srcHtml + html;
</script>
</body>
</html>
