快捷導(dǎo)航

JavaScript動(dòng)態(tài)生成帶刪除行功能的表格

更新時(shí)間：2021年09月30日 11:03:41 作者：qq_39111074

這篇文章主要為大家詳細(xì)介紹了JavaScript動(dòng)態(tài)生成帶刪除行功能的表格，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了javascript實(shí)現(xiàn)動(dòng)態(tài)生成表格/刪除行的具體代碼，供大家參考，具體內(nèi)容如下

動(dòng)態(tài)生成一個(gè)帶刪除行功能的表格：

實(shí)現(xiàn)思路

1、獲取表格<tbody>元素
2、獲取要填充的數(shù)據(jù)，一般是從數(shù)據(jù)庫(kù)取數(shù)據(jù)，也可以自己模擬一組數(shù)據(jù)進(jìn)行測(cè)試，數(shù)據(jù)是以對(duì)象的形式存儲(chǔ)的，多行數(shù)據(jù)可以用數(shù)組進(jìn)行存儲(chǔ)，數(shù)組中每一項(xiàng)均為一個(gè)對(duì)象
3、①循環(huán)遍歷對(duì)象數(shù)組，創(chuàng)建行，
②嵌套一個(gè)循環(huán)- - -循環(huán)遍歷對(duì)象：
a.根據(jù)屬性創(chuàng)建所需個(gè)數(shù)的單元格，
b.并給單元格賦值，
c.然后添加單元格到行中，
③添加一個(gè)單元格，并賦值一個(gè)a鏈接，文本內(nèi)容- - -“刪除”，將該單元格添加到行
4、添加改行到tbody中
5、獲取所有的 a 元素- - -document.querySelectorAll(‘a(chǎn)')，獲得一個(gè)對(duì)象數(shù)組
6、循環(huán)遍歷 a 對(duì)象數(shù)組，給 a 鏈接綁定點(diǎn)擊事件，添加刪除功能- - -tbody.removeChild(this.parentNode.parentNode);

代碼示例

<!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>動(dòng)態(tài)生成表格</title>
    <style>
        table {
            border: 1px solid pink;
            border-collapse: collapse;
        }
        
        thead {
            background-color: #ddd;
        }
    </style>
</head>

<body>
    <table border="1" cellpadding="5" cellspacing="0" align="center" width="600px">
        <thead>
            <tr>
                <th>姓名</th>
                <th>科目</th>
                <th>成績(jī)</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>

        </tbody>
    </table>
    <script>
        var tbody = document.querySelector('tbody');

        var list = [{
            'name': '海綿寶寶',
            'subject': 'JavaScript',
            'age': 66
        }, {
            'name': '哆唻愛(ài)夢(mèng)',
            'subject': 'JavaScript',
            'age': 99
        }, {
            'name': '史迪仔',
            'subject': 'JavaScript',
            'age': 60
        }, {
            'name': '皮卡丘',
            'subject': 'JavaScript',
            'age': 88
        }];

        for (var i = 0; i < list.length; i++) {
            // 一、創(chuàng)建行
            var tr = document.createElement('tr');

            // 二、填充數(shù)據(jù)
            for (var k in list[i]) {
                console.log(list[i][k]);
                // 1.創(chuàng)建td單元格
                var td = document.createElement('td');
                // 單元格填充內(nèi)容
                td.innerHTML = list[i][k];
                // 2.添加單元格
                tr.appendChild(td);
            }
            // 三、添加刪除鏈接
            var td = document.createElement('td');
            td.innerHTML = '<a href="javascript:;" >刪除</a>';
            tr.appendChild(td);
            // 四、添加行
            tbody.appendChild(tr);
        }

        // 添加刪除功能
        var as = document.querySelectorAll('a');
        for (var i = 0; i < as.length; i++) {
            as[i].onclick = function() {
                tbody.removeChild(this.parentNode.parentNode);
            }
        }

        console.log(tbody.childNodes);
        console.log(tbody.children);
    </script>
</body>

</html>

頁(yè)面效果：