js（伪）动态创建表格逻辑-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_61320547/article/details/131921138
详细备注，练习代码，仅供参考
效果：
<!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 {
        width: 600px;
        text-align: center;
        border: 1px solid #ccc;
        margin: 100px auto;
      }
      table th {
        height: 60px;
        background-color: #ccc;
      }
      table td {
        border: 1px solid #ccc;
        height: 40px;
      }
    </style>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th>会员名称</th>
          <th>会员项目</th>
          <th>会员优惠</th>
          <th>会员缴费</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody></tbody>
    </table>
    <script>
      // 1.模拟数据库，建立数据
      let shu = [
        {
          name: '叶明',
          xiang: '爬山',
          hui: '29',
          jin: '200',
        },
        {
          name: '顾黎',
          xiang: '游泳',
          hui: '99',
          jin: '299',
        },
        {
          name: '潘帆',
          xiang: '钓鱼',
          hui: '45',
          jin: '278',
        },
        {
          name: '王朔',
          xiang: '漂流',
          hui: '199',
          jin: '499',
        },
      ]
      // 2.创建行
      //   获取元素
      let tbody = document.querySelector('tbody')
      // 3.行元素，可能有多个，用循环
      // 获取数组的组数，就是行数
      for (let i = 0; i < shu.length; i++) {
        // 4.创建行
        let tr = document.createElement('tr')
        // 5.添加节点
        tbody.appendChild(tr)
        // 6.单元格在行内，单元格代码在行内写
        // 7.单元格有多个，用循环
        // 单元格个数取决于对象的属性个数
        // 11.这里是根据数组的属性创建的单元格，删除功能的不在这，要额外创建
        for (let j in shu[i]) {
          // 9.为何是shu[i]呢？shu[i]     shu[i]表示读取shu中的第i一个对象，
          //   即备份的第一个行i数据。通过使用for...in循环，可以遍历该对象的每个属性，因为对象的属性以键值对的形式存在。
          //   循环执行时，j代表对象的属性名（键），而就shu[i][j]代表该属性对应的值。
          // 创建节点
          //   console.log(j, shu[i][j])
          let td = document.createElement('td')
          //   9.内容应在单元格内，且在添加之前就将值给过去
          // shu[i][j]代表该属性对应的值。也就是内容信息了
          //   10.尝试添加删除功能
          td.innerHTML = shu[i][j]
          // 8.添加节点
          tr.appendChild(td)
        }
        // 12.创建删除单元格
        // 当前位于创建行的代码快中，也就是说在这写的话就是，在第i行内创建第i个单元格
        // 13.创建删除单元格
        let td = document.createElement('td')
        // 给td添加内容
        td.innerHTML = "<a href='javascript:;'>删除</a>"
        // 14.添加删除单元格
        tr.appendChild(td)
      }
      // 15.添加删除单元格的功能
      //   先获取元素
      let a = document.querySelectorAll('a')
      let tr = document.querySelectorAll('tr')
      // 16.绑定事件
      for (let i = 0; i < a.length; i++) {
        a[i].onclick = function () {
          tbody.removeChild(tbody.children[0])
        }
      }
    </script>
  </body>
</html>