码迷,mamicode.com
首页 > 其他好文 > 详细

动态创建表格1

时间:2019-08-29 00:02:02      阅读:94      评论:0      收藏:0      [点我收藏+]

标签:set   class   document   creat   html   div   tom   创建表   text   

技术图片

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

</head>
<body>
 <div id="data">
    <table>
      <thead>
        <tr>
          <th>ename</th>
          <th>salary</th>
          <th>age</th>
        </tr>
      </thead>
      <tbody>
        
      </tbody>
    </table>
  </div>
  <script>
 var json=[
    {"ename":"Tom", "salary":11000, "age":25},
    {"ename":"John", "salary":13000, "age":28},
    {"ename":"Mary", "salary":12000, "age":25}
  ];
  var tbody=document.querySelector("table>tbody");
  for(var emp of json){
    var tr=document.createElement("tr");
    tbody.appendChild(tr);
    for(var pname in emp){
      var td=document.createElement("td");
      tr.appendChild(td);
      td.innerHTML=emp[pname];
    }
  }
  </script>
</body>
</html>

 

动态创建表格1

标签:set   class   document   creat   html   div   tom   创建表   text   

原文地址:https://www.cnblogs.com/sugartang/p/11427261.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!