【JS实现】动态生成或删除单元格

昼白 • 2021-09-07 • CSS/HTML/JavaScript • 229 阅读

效果

代码

<!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>Document</title>
    <style>
        table {
            margin: 0 auto;
        }

        thead {
            background-color: blue;
        }
    </style>
</head>

<body>
    <table border="1px" cellpadding="10px" cellspacing="0" width="400px">
        <thead>
            <tr>
                <td>姓名</td>
                <td>课程</td>
                <td>分数</td>
                <td>删除</td>
            </tr>
        </thead>
        <tbody>
           
        </tbody>
    </table>
    <script>
        dates = [{
            name: '魏璎珞',
            subject: 'javascript',
            score: 100
        },{
            name: '魏璎珞',
            subject: 'javascript',
            score: 100
        },{
            name: '魏璎珞',
            subject: 'javascript',
            score: 100
        },{
            name: '魏璎珞',
            subject: 'javascript',
            score: 100
        }]
        // 往tbody里添加tr，根据人数决定
        var tbody = document.querySelector('tbody');
        for (var i = 0; i < dates.length; i++) {
            // 创建行
            var tr = document.createElement('tr');
            // 添加行
            tbody.appendChild(tr);
            // 行里面创建单元格td单元格的数量由对象中属性数量决定
            for (var k in dates[i]) {//里面的for循环管列td
                // 创建单元格
                var td = document.createElement('td');
                // console.log(dates[i][k]);
                td.innerHTML = dates[i][k];
                tr.appendChild(td);
            }
            // 创建删除单元格
            var tds = document.createElement('td');
            tds.innerHTML = '<a href="javascript:;">删除</a>';
            tr.appendChild(tds);
        }
        // 点击删除后删除对应行
        var a = document.querySelectorAll('a');
            for (var i = 0; i < a.length; i++) {
                a[i].addEventListener('click', function() {
                    tbody.removeChild(this.parentNode.parentNode);
                })
            }
    </script>
</body>
</html>

 

本站部分文章资源来源于互联网，仅供学习交流，如若要商用，请购买正版！
若不听劝告，网友造成出现一切后果，与本站本人无关
本站有些资源未经测试，请注意网络安全，本站不对下载的资源造成的后果负责
免责声明
作者:昼白
转载请注明来源：https://www.2bcnm.com/3256.htm
THE END
分享
二维码
打赏
海报
【JS实现】动态生成或删除单元格
效果 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatibl……
<<上一篇
下一篇>>
文章目录
关闭
目 录