原生js实现动态生成表格

最新推荐文章于 2024-05-16 16:52:30 发布

想做一只快乐的修狗

最新推荐文章于 2024-05-16 16:52:30 发布

阅读量406

点赞数 1

文章标签： javascript html 前端 dom 节点操作

本文链接：https://blog.csdn.net/weixin_44109827/article/details/124930036

版权

1. 思路

准备好动态添加的数据
向tbody中创建行，行数有人数决定（即由datas的长度决定）
创建“删除”操作单元格
实现删除操作

2. 代码

<!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>动态生成表单</title>
    <style>
      table {
        width: 500px;
        margin: 100px auto;
        border-collapse: collapse;
        text-align: center;
      }
      td,
      th {
        border: 1px solid #333;
      }
      thead tr {
        height: 40px;
        background-color: #ccc;
      }
    </style>
  </head>
  <body>
    <!-- 表格 -->
    <!-- cellpadding 是边框与其内容的间隙大小 -->
    <table cellspacing="0">
      <!-- 表头 -->
      <thead>
        <tr>
          <th>科目</th>
          <th>姓名</th>
          <th>成绩</th>
          <th>操作</th>
        </tr>
      </thead>
      <!-- 表格内容 -->
      <tbody></tbody>
    </table>
    <script>
      // 1. 准备好动态添加的数据
      var datas = [
        {
          name: "张三",
          subject: "python",
          score: 100,
        },
        {
          name: "李四",
          subject: "js",
          score: 99,
        },
        {
          name: "王五",
          subject: "java",
          score: 90,
        },
        {
          name: "刘能",
          subject: "c",
          score: 60,
        },
      ];
      // 2. 向tbody中创建行，行数有人数决定（即由datas的长度决定）
      var tbody = document.querySelector('tbody');
      for(var i=0;i<datas.length;i++) { // 行
        var tr = document.createElement('tr');
        tbody.appendChild(tr);
        // 在tr中创建td，td的个数由datas中对象中属性个数决定
        for(var k in datas[i]) { // 列
          // 创建单元格
          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(){
          // 要删除的是tr，a的父节点是td，td的父节点是tr
          tbody.removeChild(this.parentNode.parentNode);
        }
      }
    </script>
  </body>
</html>

3. 效果

在这里插入图片描述

想做一只快乐的修狗

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
原生js实现动态生成表格

1. 思路准备好动态添加的数据向tbody中创建行，行数有人数决定（即由datas的长度决定）创建“删除”操作单元格实现删除操作2. 代码<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name=
复制链接

扫一扫