Create a dynamic table 1

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

 

Guess you like

Origin www.cnblogs.com/sugartang/p/11427261.html