动态获取表格数据-事件监听函数和传统函数区别

最新推荐文章于 2023-09-06 15:42:35 发布

Idpd.Boy

最新推荐文章于 2023-09-06 15:42:35 发布

阅读量101

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/Idpd_/article/details/128661810

版权

动态获取表格数据-事件监听函数和传统函数区别

Document

<table cellspacing="0">
    <thead>
        <tr>
            <th>姓名</th>
            <th>科目</th>
            <th>成绩</th>
            <th>操作</th>
        </tr>
    </thead>
    <tbody>

    </tbody>
</table>

<script>
    var data = [{
        name: '魏璎珞',
        subject: 'Javascript',
        score: 95
    }, {
        name: '弘利',
        subject: 'Javascript',
        score: 96
    }, {
        name: '富恒',
        subject: 'Javascript',
        score: 97
    }, {
        name: '明宇',
        subject: 'Javascript',
        score: 98
    }];

    // 传统方式点击函数处理
    // var tbody = document.querySelector('tbody');
    //	遍历data
    // for (var i = 0; i < data.length; i++) ；
    //	每个i创建一行
    //     var creTr = document.createElement('tr');
    //     tbody.appendChild(creTr);
    // 	循环data内的对象确定td的数量，并将数据添加到每一个td内
    //     for (var j in data[i]) {
    //         var td = document.createElement('td');
    //         td.innerHTML = data[i][j];
    //         creTr.appendChild(td);
    //     }
    //	创建最后一个单元格的删除按钮
    //     var td = document.createElement('td');
    //     td.innerHTML = '<a href="javascript:;" onclick="del(this)">删除</a>';
    //     creTr.appendChild(td);
    // }

    // function del(d) {
    //     tbody.removeChild(d.parentNode.parentNode);
    // }

    // 使用事件监听处理

    var tbody = document.querySelector('tbody');
    for (var i = 0; i < data.length; i++) {
        var creTr = document.createElement('tr');
        tbody.appendChild(creTr);
        for (var j in data[i]) {
            var td = document.createElement('td');
            td.innerHTML = data[i][j];
            creTr.appendChild(td);
        }
        var td = document.createElement('td');
        td.innerHTML = '<a href="javascript:;">删除</a>';
        creTr.appendChild(td);
    }

    var s = document.querySelectorAll('a');
    for (var i = 0; i < s.length; i++) {
        s[i].addEventListener('click', function() {
            tbody.removeChild(this.parentNode.parentNode);
        })
    }

</script>