视频资源:https://www.bilibili.com/video/av62653534?p=52
北京动力节点 js教程
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<title>设置table的tbody</title>
</head>
<body>
<script type="text/javascript">
//有这些JSON数据
var data={
"total" :4,
"emps":[
{"empno":"10001","empname":"jack","sal":"20000"},
{"empno":"10002","empname":"rose","sal":"15000"},
{"empno":"10003","empname":"jim","sal":"10000"},
{"empno":"10004","empname":"tony","sal":"10000"}
]
};
//希望可以调用一个按钮将数据显示在一张表格上
window.onload=function(){
var display= document.getElementById("display")
display.onclick= function(){
var emplist =document.getElementById("emplist");
//创建字符变量
var html="";
for(var i =0;i<data.emps.length;i++){
html+="<tr>";
html+="<td>"+data.emps[i].empno+"</td>";
html+="<td>"+data.emps[i].empname+"</td>";
html+="<td>"+data.emps[i].sal+"</td>";
html+="</td>";
}
emplist.innerHTML=html;
var conut =document.getElementById("count")
count.innerHTML=data.total;
}
}
</script>
<input type="button" value="显示员工信息列表" id="display"/>
<table border="1px" width="50%">
<tr>
<td>员工编号</td>
<td>员工姓名</td>
<td>工资</td>
</tr>
<tbody id ="emplist">
</tbody>
</table>
总共<span id="count">0</span>条数
</body>
</html>