JS中设置table的tbody 

代码：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			var data={
				"total":4,
				"emps":[
					{"empno":1,"ename":"Smith","sal":1500},
					{"empno":2,"ename":"Jack","sal":900},
					{"empno":3,"ename":"Bob","sal":1000},
					{"empno":4,"ename":"Rose","sal":1200},
				]
			};
			//把数据展示到table中
			window.onload=function(){
				var displayBtnElt=document.getElementById("displayBtn");
				displayBtnElt.onclick=function(){
					var html="";
					var emps=data.emps;
					for(var i=0;i<emps.length;i++){
						var emp=emps[i];
						html+="<tr>";
						html+="<td>"+emp.empno+"</td>";
						html+="<td>"+emp.ename+"</td>";
						html+="<td>"+emp.sal+"</td>";
						html+="</tr>";
					}
					var tbodyElt=document.getElementById("empTbody");
					tbodyElt.innerHTML=html;
					var spanElt=document.getElementById("countSpan");
					spanElt.innerText=emps.length;
				}
			}
		</script>
		<input type="button" value="显示员工信息" id="displayBtn">
		<h2>员工信息列表</h>
		<table border="1px" width="50%">
			<tr>
				<th>员工编号</th>
				<th>员工姓名</th>
				<th>员工薪资</th>
			</tr>
			<tbody id="empTbody">
			</tbody>
		</table>
		信息总数：<span id="countSpan"></span>
	</body>
</html>

　　

posted @ 2021-11-13 11:19  石乐智先生  阅读(799)  评论(0)    收藏  举报