zoukankan      html  css  js  c++  java
  • 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>
    

      

  • 相关阅读:
    JavaScript 闭包(转)
    JavaScript 获取键盘扫描码
    前台网站优化方案
    设计模式之装饰者模式
    设计模式之蝇量模式
    设计模式之策略模式
    Algorithm学习之any_of
    Algorithm学习之all_of学习
    Algorithm学习之adjacent_find学习
    数据结构-表达式求值
  • 原文地址:https://www.cnblogs.com/-slz-2/p/15547563.html
Copyright © 2011-2022 走看看