动态创建表格

来源：互联网发布：最好手机电视直播软件编辑：程序博客网时间：2024/06/15 20:01
<span style="font-size:18px;"><!DOCTYPE HTML><html><head><title>动态创建表格</title><meta charset="utf-8" /><style>table{width:600px; border-collapse:collapse;text-align:center;}td,th{border:1px solid #ccc}</style><script>//json: 以js对象格式存储或传输数据的字符串格式//json格式和js中的对象直接量完全一样//唯一特别要求: 属性名最好都加引号var json='[{"ename":"Tom", "salary":3500, "age":25},{"ename":"John", "salary":3800, "age":28},{"ename":"Mary", "salary":3600, "age":25}]';//将json字符串转为内存中的对象var emps=eval("("+json+")");window.onload=function(){//创建table元素var table=document.createElement("table");//创建thead元素var thead=document.createElement("thead");//将thead追加到table下table.appendChild(thead);//创建tr元素var tr=document.createElement("tr");//将tr元素追加到theadthead.appendChild(tr);//遍历emps中第一个对象的每个属性for(var key in emps[0]){//每遍历一个属性，就创建一个th元素var th=document.createElement("th");//将th元素的内容设置为keyth.innerHTML=key;//将th追加到tr中tr.appendChild(th);}//创建tbody元素var tbody=document.createElement("tbody");table.appendChild(tbody);//将tbody追加到table中//遍历emps中每个员工对象for(var i=0;i<emps.length;i++){var tr=document.createElement("tr");//创建tr元素tbody.appendChild(tr);//将tr追加到tbody下//遍历当前员工对象的每个属性for(var key in emps[i]){//每遍历一个属性，就创建一个td元素var td=document.createElement("td");//设置td的内容为当前员工对象的key属性的值td.innerHTML=emps[i][key];tr.appendChild(td);//将td追加到tr中}}//将table追加到id为data的父元素下——layoutdata.appendChild(table);}</script></head><body><div id="data"></div></body></html></span>
0 0