动态创建表格

来源：互联网发布：淘宝客推广专区编辑：程序博客网时间：2024/05/18 06:28
<!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字符串如下：   var json='['      +'{"ename":"Tom","salary":5000,"age":25},'      +'{"ename":"John","salary":7000,"age":28},'      +'{"ename":"Mary","salary":6000,"age":26}'      +']';   //使用eval函数，将服务器端接收的json字符串，转化为js程序中可以识别的对象   var emps=eval("("+json+")");   //创建节点片段来存储table中生成的tr片段   var frag=document.createDocumentFragment()   //当页面加载后，在data div中创建table对象及子对象   window.onload=function(){      //Step1: 创建空table对象      var table=document.createElement("table");       //Step2: 添加表头行       //    Step2.1: 创建空的tr对象，临时保存在tr中       //  Step2.2: 创建3个空th对象，       //           第1个th对象的内容="姓名"       //           第2个th对象的内容="薪资"       //           第3个th对象的内容="年龄"      //  Step2.3: 将3个th分别追加到tr对象下       //  Step2.4: 将tr追加到table对象下//Step3: 遍历emps数组中每个对象，创建主体内容for(var i=0;i<emps.length;i++){   //   每遍历一个对象，要创建一个空tr对象 var tr=document.createElement("tr");//   创建一个空td对象，其中放入当前对象的ename属性值var td1=document.createElement("td");   td1.innerHTML=emps[i].ename;//   创建一个空td对象，其中放入当前对象的salary属性值   var td2=document.createElement("td");   td2.innerHTML=emps[i].salary;//   创建一个空td对象，其中放入当前对象的age属性值   var td3=document.createElement("td");   td3.innerHTML=emps[i].age;//   将3个td都追加到tr下   tr.appendChild(td1);   tr.appendChild(td2);   tr.appendChild(td3);//   将tr追加到frag片段下   frag.appendChild(tr)}      //Step final: 将文档片段一次性追加到父对象下      document.querySelector("#data table").appendChild(frag)   }</script></head><body>   <div id="data">      <table>         <tr>            <th>姓名</th>            <th>薪资</th>            <th>年龄</th>         </tr>      </table>   </div></body></html>
0 0