数据表格table组件如何显示JSON的子集数据
1 回答
炎炎设计
TA贡献1808条经验 获得超4个赞
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8" />
<title>MODEL PAGE</title>
<style type="text/css">
table {
border: 1px solid black;
border-collapse: collapse;
}
td,th {
border: 1px solid black;
}
</style>
<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<script type="text/javascript">
var datanav = [
{
"name" : "张三",
"position" : "1",
"powerrate" : "2",
"waterrate" : "3",
"healthcosts" : "4",
"watermeter" : "5",
"ammeter" : "6",
"linkman" : "7",
"phone" : "8",
"rental" : "9",
"tenancy" : "10",
"remark" : "11"
},
{
"name" : "李四",
"position" : "11",
"powerrate" : "10",
"waterrate" : "9",
"healthcosts" : "8",
"watermeter" : "7",
"ammeter" : "6",
"linkman" : "5",
"phone" : "4",
"rental" : "3",
"tenancy" : "2",
"remark" : "1"
}
];
window.onload = function ()
{
var table = document.getElementsByTagName ('table')[0];
for ( var i = 0; i < datanav.length; i++)
{
var tr = table.insertRow (table.rows.length);
var obj = datanav[i];
for ( var p in obj)
{
if (p == 'tenancy')
{
break;
}
var td = tr.insertCell (tr.cells.length);
td.innerText = obj[p];
}
}
}
</script>
</head>
<body>
<table>
<tr>
<th>租户</th>
<th>水费</th>
<th>电费</th>
<th>卫生费</th>
<th>水表位置</th>
<th>电表位置</th>
<th>联系人</th>
<th>电话</th>
<th>房费</th>
<th>租赁合同期限</th>
</tr>
</table>
</body>
</html>
添加回答
举报
0/150
提交
取消