JS中设置table的tbody

2021-11-13 11:33:11 阅读：161 来源： 互联网

标签：ename sal tbody empno JS html emps var table

代码：
<!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>

标签：ename,sal,tbody,empno,JS,html,emps,var,table
来源： https://www.cnblogs.com/-slz-2/p/15547563.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

JS中设置table的tbody