动态生成单元格效果

最新推荐文章于 2024-05-21 19:09:41 发布

m_0_1_0_1

最新推荐文章于 2024-05-21 19:09:41 发布

阅读量251

点赞数 1

分类专栏： Dom 文章标签： javascript

本文链接：https://blog.csdn.net/m_0_1_0_1/article/details/123775373

版权

Dom 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

思路：在html中只需要写thead即可，tbody里面的内容通过动态来生成。

在js中，使用数组来存放模拟的对象，一个对象即是一条数据，一条数据也即是一行的内容。在此需要使用两个for循环，外层来控制有多少行，内层来控制每行有多少个单元格（类似于打印三角形）。

外层循环的次数根据数组的长度来定，长度是几就创建几行，然后在循环体内进行创建行、添加行。内层循环使用for...in来获取对象的属性，有几个属性就创建几个单元格。通过obj[k]的方式将属性值赋值给单元格，再添加单元格。

由于最后一列是删除，需要单独创建单元格，方法同上（删除两字用标签包起来，便于删除操作获取）。删除的时候首先获取到所有的"删除"，利用循环鼠标点击的时候触发事件发生。（注：当点击a删除当前a所在行(链接爸爸的爸爸)this.parentNode.parentNode）

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      table {
        width: 600px;
        margin: 100px auto;
        border-collapse: collapse;
        text-align: center;
      }

      td,
      th {
        border: 1px solid black;
      }

      thead tr {
        height: 40px;
        background-color: #ccc;
      }

      a {
        text-decoration: none;
      }
    </style>
  </head>

  <body>
    <table>
      <thead>
        <tr>
          <th>姓名</th>
          <th>科目</th>
          <th>成绩</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody></tbody>
    </table>
    <script>
      //先准备好数据
      var datas = [
        {
          name: "嘟嘟嘟",
          subject: "javascript",
          score: 100,
        },
        {
          name: "嘀嘀嘀",
          subject: "javascript",
          score: 0,
        },
        {
          name: "哒哒哒",
          subject: "javascript",
          score: 100,
        },
        {
          name: "哈哈哈",
          subject: "javascript",
          score: 10,
        },
        {
          name: "嘿嘿嘿",
          subject: "javascript",
          score: 10,
        },
      ];
      //往tbody里面创建行，有几人（通过数组的长度）就创建几行
      var tbody = document.querySelector("tbody");
      for (var i = 0; i < datas.length; i++) {
        //1.创建行 tr
        var tr = document.createElement("tr");
        tbody.appendChild(tr);
        //2.行里面创建单元格 td单元格的数量取决于每个对象里面的属性个数
        for (var k in datas[i]) {
          // datas[i]为对象  k 属性   obj[k]得到是属性值
          var td = document.createElement("td");
          //把对象里面的属性值给单元格td
          td.innerHTML = datas[i][k];
          tr.appendChild(td);
        }
        //3.创建有删除两个字的单元格
        var td = document.createElement("td");
        td.innerHTML = "<a href='javascript:;'>删除</a>";
        tr.appendChild(td);
      }
      //4.删除操作
      var as = document.querySelectorAll("a");
      for (var i = 0; i < as.length; i++) {
        as[i].onclick = function () {
          tbody.removeChild(this.parentNode.parentNode);
        };
      }
    </script>
  </body>
</html>

m_0_1_0_1

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
动态生成单元格效果

思路：在html中只需要写thead即可，tbody里面的内容通过动态来生成。在js中，使用数组来存放模拟的对象，一个对象即是一条数据，一条数据也即是一行的内容。在此需要使用两个for循环，外层来控制有多少行，内层来控制每行有多少个单元格（类似于打印三角形）。外层循环的次数根据数组的长度来定，长度是几就创建几行，然后在循环体内进行创建行、添加行。内层循环使用for...in来获取对象的属性，有几个属性就创建几个单元格。通过obj[k]的方式将属性值赋值给单元格，再添加单元格。由于最后一列是删除.
复制链接

扫一扫