动态创建表格

最新推荐文章于 2024-09-25 10:48:14 发布

积跬致千

最新推荐文章于 2024-09-25 10:48:14 发布

阅读量246

点赞数

分类专栏： Dom

本文链接：https://blog.csdn.net/web_zhouliang/article/details/70172016

版权

Dom 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!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>