DOM操作之动态创建表格案例--- # 主题列表：juejin, github, smartblue, cyanosis

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    table{
        border-collapse: collapse;
    }
    thead{
        background-color: #ccc;
    }
    th,td{
        width: 100px;
        height: 40px;
        text-align: center;
    }
  </style>
</head>
<body>
  <h1>动态创建表格</h1>
  <table id="wrap" border="1">
    <thead>
      <tr>
        <th>姓名</th>
        <th>科目</th>
        <th>成绩</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody id="tb">

    </tbody>
  </table>
  <script src="common.js"></script>
  <script>
    // 获取元素
    var tb = my$("tb");
    // 模拟后台传输的数据
    var datas = [
      {name: "zs",subject: "语文",score: 80},
      {name: "ls",subject: "数学",score: 87},
      {name: "ww",subject: "英语",score: 90},
      {name: "lb",subject: "物理",score: 89},
      {name: "cc",subject: "生物",score: 100},
      {name: "sq",subject: "化学",score: 98}
    ];
    // 根据数组中的数据个数生成对应个数的 tr 
    // 将生成 tr 添加到 tbody 中
    // 数组遍历
    for (var i = 0 ; i < datas.length ; i++) {
      // 每一个数据都要生成一个 tr
      var tr = document.createElement("tr");
      // 添加到 tb 中
      tb.appendChild(tr);
      // 每一个 tr 中还需要添加对应的 td 
      // 每一行 内部的 td 中的数据来自于 数组的每一项
      var data = datas[i]; //{name: "zs",subject: "语文",score: 80}
      // 遍历 data 对象，根据它的项数来确定添加的 td 的个数
      for (var k in data) {
        // 生成一个 td
        var td = document.createElement("td");
        // 添加到 tr 中去
        tr.appendChild(td);
        // 添加给每一个 td 数据
        td.innerText = data[k];
      }
      // 除了前面动态获取的数据 td 之外，还要添加一个删除的 td
      td = document.createElement("td");
      // 添加到 tr 中去
      tr.appendChild(td);
      // 最后一个 td 中需要添加一个 a 标签
      var a = document.createElement("a");
      a.innerText = "删除";
      a.href = "javascript:void(0);"
      // 将 a 添加到 td 中
      td.appendChild(a);
      // 给生成的每个 a 添加一个点击事件，移除当前所在的行
      a.onclick = function () {
        // 找到所在的行的 tr
        // this.parentNode.parentNode
        // 从 tbody 中移除对应的 tr
        tb.removeChild(this.parentNode.parentNode);
      };
    }
  </script>
</body>
</html>