动态生成表格

 

 

 

  <style>
      * {
        padding: 0;
        margin: 0;
      }
      table {
        width: 500px;
        margin: 100px auto;
        border-collapse: collapse; /*边框合并模式*/
        text-align: center;
      }
      td,
      th {
        border: 1px solid #333;
      }
      thead tr {
        height: 40px;
        background-color: #cccccc;
      }
    </style>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th>姓名</th>
          <th>科目</th>
          <th>成绩</th>
          <th>操作</th>
        </tr>
      </thead>

      <tbody></tbody>
    </table>
  </body>
</html>
<script>
  //1,先准备数据
  var datas = [
    {
      name: "甲",
      subject: "javascript",
      score: 100,
    },
    {
      name: "乙",
      subject: "javascirpt",
      score: 99,
    },
    {
      name: "丙",
      subject: "javascript",
      score: 98,
    },
  ];
  //2,往tbody里面创建行，有几个人（通过数组的长度）我们就创建几行
  var tbody = document.querySelector("tbody");
  for (
    var i = 0;
    i < datas.length;
    i++ //外面的for循环 是 行tr
  ) {
    var tr = document.createElement("tr");
    tbody.appendChild(tr);
    //3,往tr每一行里面创建单元格（跟数据有关系的3个单元格），td单元格的数量取决于每个对象的属性个数 for循环遍历对象 datas[i]
    for (var k in datas[i]) { //里面的for循环是 列
      var td = document.createElement("td"); //创建单元格
      tr.appendChild(td);
      td.innerHTML = datas[i][k]; //把对象里面的属性值 datas[i][k]给td
    }
    //4，创建有删除二字的单元格
    var td = document.createElement("td");
    tr.appendChild(td);
    td.innerHTML = "<a href='javascript:;'>删除</a>";
  }

  //5,删除操作
  var as = document.querySelectorAll("a");
  for (var i = 0; i < as.length; i++) {
    as[i].onclick = function () {
      //点击a 删除 当前a 所在的行（a链接的爸爸的爸爸）
      tbody.removeChild(this.parentNode.parentNode);
    };
  }
</script>

 

posted @ 2022-04-18 11:26  罗砂  阅读(97)  评论(0)    收藏  举报