JS day34 动态生成表格案例

最新推荐文章于 2022-09-27 15:22:01 发布

肝JOJO

最新推荐文章于 2022-09-27 15:22:01 发布

阅读量149

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/qq_34620296/article/details/101879310

版权

JavaScript 专栏收录该内容

59 篇文章 1 订阅

订阅专栏

一.思路分析

1.数据采用对象形式存储
2.所有的数据放到tbody里面
3.行数=数组长度
4.单元格个数=数组中每个对象的属性个数
5.将对象属性的值赋给单元格,然后将单元格插入tr行中
6.最后一列单元格是删除,单独创建

二.效果展示

1会根据数据变化自动生成
在这里插入图片描述

三.代码

    <style>
        table{
            width: 500px;
            margin: 100px auto;
            border-collapse: collapse;
            text-align: center;
        }
        th{
            height: 40px;
            border: 1px solid #333;
            background-color: #ccc;
        }
        
        td{
            height: 40px;
            background-color: #ccc;
            border: 1px solid #333;
        }
 
    </style>

    <script type="text/javascript">    
        window.onload=function(){
            var datas=[{  //用数组来存储数据
                name:'皮特',
                subject:'js',
                score:100
            },{
                name:'loop',
                subject:'js',
                score:90
            },{
                name:'小明',
                subject:'js',
                score:90
            },{
                name:'珊迪',
                subject:'js',
                score:80
            }];
            
            var tbody=document.querySelector('tbody');
            for(var i=0;i<datas.length;i++){
                var tr=document.createElement('tr');  //创建tr行,行数等于数组长度
                tbody.appendChild(tr);  //将行插入tbody中
                for(var k in datas[i]){  //遍历datas中的第i个对象 K得到属性名,obj[k]得到属性值
                    var td=document.createElement('td');  //创建单元格td
                    td.innerHTML= datas[i][k];  //将第i个对象的属性值赋给td
                    tr.appendChild(td);  //将单元格td插入tr行

                }
                var td=document.createElement('td');  //创建删除的单元格
                td.innerHTML='<a href="javascript:;">删除</a>';  //给td赋值
                tr.appendChild(td);  //插入到tr
            }
            var as=document.querySelectorAll('a');
            for(var i=0;i<as.length;i++){
                as[i].onclick=function(){
                    tbody.removeChild(this.parentNode.parentNode);  //删除tbody的子元素tr行(是a的父亲的父亲)
                }
            }                              
        }    
    </script>

<body>
    <table>
        <thead>
            <tr>
                <th>姓名</th>
                <th>科目</th>
                <th>成绩</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            

        </tbody>

    </table>
    
</body>

肝JOJO

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS day34 动态生成表格案例

一.思路分析1.数据采用对象形式存储2.所有的数据放到tbody里面3.行数=数组长度4.单元格个数=数组中每个对象的属性个数5.将对象属性的值赋给单元格,然后将单元格插入tr行中6.最后一列单元格是删除,单独创建二.效果展示1会根据数据变化自动生成三.代码 <style> table{ width: 500px; ...
复制链接

扫一扫

专栏目录