<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table border="1" id="tb">
<tr>
<td>租户</td>
<td>水费</td>
<td>电费</td>
<td>卫生费</td>
<td>水表位置</td>
<td>电表位置</td>
<td>联系人</td>
<td>电话</td>
<td>房费</td>
<td>租赁合同期限</td>
</tr>
</table>
<script>
window.onload = function () {
//数据层
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"
}];
var tb = document.getElementById("tb");
console.log(tb.rows.length);
for (var i = 0; i < datanav.length; i++) {
var row = tb.insertRow(tb.rows.length);
var c1 = row.insertCell(0);
c1.innerHTML = datanav[i].name;
var c2 = row.insertCell(1);
c2.innerHTML = datanav[i].waterrate;
var c3 = row.insertCell(2);
c3.innerHTML = datanav[i].powerrate;
var c4 = row.insertCell(3);
c4.innerHTML = datanav[i].healthcosts;
var c5 = row.insertCell(4);
c5.innerHTML = datanav[i].watermeter;
var c6 = row.insertCell(5);
c6.innerHTML = datanav[i].ammeter;
var c7 = row.insertCell(6);
c7.innerHTML = datanav[i].linkman;
var c8 = row.insertCell(7);
c8.innerHTML = datanav[i].phone;
var c9 = row.insertCell(8);
c9.innerHTML = datanav[i].rental;
var c10 = row.insertCell(9);
c10.innerHTML = datanav[i].tenancy;
}
}
</script>
<!--引入动态加载文件-->
</body>
</html>