JavaScript中动态生成表格

1.  以下这个案例比较典型:

        涉及到dom节点的操作,以及数组和对象的遍历方法

题目要求:

  • 使用数组把学生数据模拟出来。
  • 动态创建行、单元格。
  • 为单元格填充数据。
  • 提供“删除”链接,可删除所在的行。

效果如下:

 html代码部分如下:

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

js代码块:

        //定义数组对象保存数据
        let arr = [
            {
                name: 'Tom',
                subject: 'JavaScript',
                score: '100'
            },
            {
                name: 'Jack',
                subject: 'JavaScript',
                score: '91'
            },
            {
                name: 'Tony',
                subject: 'JavaScript',
                score: '99'
            }];
        //获取tbody
        let tbody = document.querySelector('tbody');

        for (let i = 0; i < arr.length; i++) {//遍历数组

            let mytr = document.createElement('tr');//创建行节点
            tbody.appendChild(mytr);//添加行节点
            for (let j in arr[i]) {//for..in 遍历对象,获取其属性值

                let td = document.createElement('td');//创建单元格节点
                td.innerHTML = arr[i][j] // 将属性值添加至td中
                mytr.appendChild(td)//添加单元格节点
            };

            // 创建操作单元格节点
            let td_delete = document.createElement('td');
            td_delete.innerHTML = '<a href="javscript:;">删除</a>'//屏蔽掉a的href跳转功能
            mytr.appendChild(td_delete);//添加至每一行
        };
        //获取所有a标签节点
        let a_arr = document.querySelectorAll('a');
        for (let i = 0; i < a_arr.length; i++) {//遍历所有节点
            a_arr[i].addEventListener('click', function () {
                //通过父节点tbody来删除它的子节点
                tbody.removeChild(this.parentNode.parentNode)
            });
        };
    </script>

页面输出结果如文章开头效果图

使用操作列单元格删除后得到如下表格

  • 5
    点赞
  • 41
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值