有json数据在web界面如何用JS的for循环取出并生成表格

<!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>

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值