<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>004设置table的tbody</title>
</head>
<body>
<script type="text/javascript">
//JSON数据
var data ={
"total":4,
"emps":[
{"empno":1234,"ename":"smith","sal":12300},
{"empno":2344,"ename":"smith","sal":"16300"},
{"empno":3444,"ename":"smith","sal":"15300"},
{"empno":4444,"ename":"smith","sal":"15000"}
]
};
//把数据展示到table当中
window.onload=function(){
var displayBtnElt = document.getElementById("displayBtn");
displayBtnElt.onclick=function(){
var emps = data.emps;
var html = "";
//循环遍历
for (var i = 0; i < emps.length; i++) {
//json对象
var emp = emps[i]
//拼接字符串
html += "<tr>";
html += "<td>"+emp.empno+"</td>";
html += "<td>"+emp.ename+"</td>";
html += "<td>"+emp.sal+"</td>";
html += "</tr>";
}
document.getElementById("emptbody").innerHTML=html;
document.getElementById("count").innerHTML=data.total;
}
}
</script>
<input type="button" value="员工信息列表" id="displayBtn"/>
<h2>员工信息列表</h2>
<hr>
<table border="1px" width="50%">
<tr>
<th>员工编号</th>
<th>员工名字</th>
<th>员工薪资</th>
</tr>
<tbody id="emptbody">
</tbody>
</table>
总共<span id="count"></span>记录条数
</body>
</html>
