动态创建表格1

最新推荐文章于 2024-05-07 15:22:24 发布

weixin_30359021

最新推荐文章于 2024-05-07 15:22:24 发布

阅读量105

点赞数

文章标签： json

原文链接：http://www.cnblogs.com/sugartang/p/11427261.html

版权

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

转载于:https://www.cnblogs.com/sugartang/p/11427261.html

优惠劵

weixin_30359021

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
动态创建表格1

<!DOCTYPE HTML><html><head><title>动态创建表格</title><meta charset="utf-8" /><style> table{width:600px; border-collapse:collapse; text-alig...
复制链接

扫一扫