js动态生成表格

最新推荐文章于 2024-05-03 16:01:29 发布

前端张子豪

最新推荐文章于 2024-05-03 16:01:29 发布

阅读量861

点赞数

分类专栏： js 文章标签： html javascript html5

本文链接：https://blog.csdn.net/weixin_49075393/article/details/120533100

版权

js 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

案例分析
1、因为里面的学生数据都是动态的，我们需要js动态生成，我们进行模拟数据，自己定义好数据，数据我们采取对象形式存储。
2、所有的数据都是放到tbody里面的行里面。
3、因为行很多，我们需要循环创建多个行。
4、每个行里面有很多单元格(对应里面的数据)，我们还继续使用循环创建多个单元格，并且把数据存入里面(双重for循环);
5、最后一列单元格是删除需要单独创建单元格。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
      *{
          margin: 0;
          padding: 0;
      }
      table{
          width: 400px;
          margin: 100px auto;
          border-collapse:collapse;
          text-align: center;
      }
      th,td{
        border: 1px solid slategrey;
      }
    </style>
</head>

<body>
    <table>
        <thead>
            <tr>
                <th>姓名</th>
                <th>学科</th>
                <th>成绩</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
    <script>
        var datas = [
            {
                name:'小红',
                subject:'语文',
                score:100
            },
            {
                name:'小明',
                subject:'语文',
                score:90
            },
            {
                name:'小亮',
                subject:'语文',
                score:60
            }
        ]
        // 往tbody里面建行，有多少数据（数组的长度）就创建多少行
        var tbody = document.querySelector('tbody');
        for(var i=0;i<datas.length;i++){
            // 创建tr行
            var tr = document.createElement('tr');
            tbody.appendChild(tr);
            // 行里面创建单元格 td 单元格的数量取决于每个对象里面的属性个数 for循环遍历对象
            for(var k in datas[i]){
                // 创建单元格
                var td = document.createElement('td');
                td.innerHTML = datas[i][k];
                tr.appendChild(td);
            }
            // 创建删除的单元格
            var td = document.createElement('td');
            td.innerHTML = '<a href="javascript:;">删除</a>'
            tr.appendChild(td);
        }
        //删除操作
        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>

前端张子豪

关注

0
点赞
踩
0

收藏

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

案例分析1、因为里面的学生数据都是动态的，我们需要js动态生成，我们进行模拟数据，自己定义好数据，数据我们采取对象形式存储。2、所有的数据都是放到tbody里面的行里面。3、因为行很多，我们需要循环创建多个行。4、每个行里面有很多单元格(对应里面的数据)，我们还继续使用循环创建多个单元格，并且把数据存入里面(双重for循环);5、最后一列单元格是删除需要单独创建单元格。<!DOCTYPE html><html lang="en"><head> .
复制链接

扫一扫