如何将json 数据显示在表格里面？
例如：vardatanav=[{"name":"张三","position":"1","powerrate":"2","waterrate":"3","healthcos...
例如：
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"}];
显示在表格里面 用js 循环 展开
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"}];
显示在表格里面 用js 循环 展开
1个回答
展开全部
<!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>
<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>
更多追问追答
追问
不引用 src="jquery-1.8.0.min.js 怎么做 用最简单的循环方法
追答
我就是放那里，我没有用啊，放都不行么？
本回答被提问者和网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
