欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間:2021年09月30日 11:03:41   作者:qq_39111074  
這篇文章主要為大家詳細介紹了JavaScript動態(tài)生成帶刪除行功能的表格,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下

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

動態(tài)生成一個帶刪除行功能的表格:

實現(xiàn)思路

1、獲取表格<tbody>元素
2、獲取要填充的數(shù)據(jù),一般是從數(shù)據(jù)庫取數(shù)據(jù),也可以自己模擬一組數(shù)據(jù)進行測試,數(shù)據(jù)是以對象的形式存儲的,多行數(shù)據(jù)可以用數(shù)組進行存儲,數(shù)組中每一項均為一個對象
3、①循環(huán)遍歷對象數(shù)組,創(chuàng)建行,
②嵌套一個循環(huán)- - -循環(huán)遍歷對象:
a.根據(jù)屬性創(chuàng)建所需個數(shù)的單元格,
b.并給單元格賦值,
c.然后添加單元格到行中,
③添加一個單元格,并賦值一個a鏈接,文本內容- - -“刪除”,將該單元格添加到行
4、添加改行到tbody中
5、獲取所有的 a 元素- - -document.querySelectorAll(‘a'),獲得一個對象數(shù)組
6、循環(huán)遍歷 a 對象數(shù)組,給 a 鏈接綁定點擊事件,添加刪除功能- - -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>動態(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>成績</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>

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

        var list = [{
            'name': '海綿寶寶',
            'subject': 'JavaScript',
            'age': 66
        }, {
            'name': '哆唻愛夢',
            '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');
                // 單元格填充內容
                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>

頁面效果:

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。

相關文章

  • 使用JS+plupload直接批量上傳圖片到又拍云

    使用JS+plupload直接批量上傳圖片到又拍云

    本文詳細介紹了通過js+plupload實現(xiàn)了繞過服務器,向又拍云批量上傳圖片的解決方法,十分的巧妙,也節(jié)省了服務器資源,這里推薦給有需要的小伙伴。
    2014-12-12
  • JavaScript實現(xiàn)找出字符串中第一個不重復的字符

    JavaScript實現(xiàn)找出字符串中第一個不重復的字符

    這篇文章主要介紹了JavaScript實現(xiàn)找出字符串中第一個不重復的字符的方法,需要的朋友可以參考下
    2014-09-09
  • 一個簡易時鐘效果js實現(xiàn)代碼

    一個簡易時鐘效果js實現(xiàn)代碼

    這篇文章主要為大家詳細介紹了一個簡易時鐘效果js實現(xiàn)代碼,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-10-10
  • JSON中雙引號的輪回使用過程中一定要小心

    JSON中雙引號的輪回使用過程中一定要小心

    如果JSON對象中有屬性是包含雙引號當轉換成字符串形式,將自動加上反斜線,詳細請祥看本文
    2014-03-03
  • bootstrap導航、選項卡實現(xiàn)代碼

    bootstrap導航、選項卡實現(xiàn)代碼

    這篇文章主要為大家詳細介紹了bootstrap導航、選項卡的實現(xiàn)代碼,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2016-12-12
  • js實現(xiàn)移動端簡易滑動表格

    js實現(xiàn)移動端簡易滑動表格

    這篇文章主要為大家詳細介紹了js實現(xiàn)移動端簡易滑動表格,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2022-02-02
  • JavaScript中的繼承方式詳解

    JavaScript中的繼承方式詳解

    這篇文章主要介紹了JavaScript中的繼承方式詳解,本文講解了js繼承的概念、原型式繼承與類式繼承、原型鏈繼承、類式繼承、組合繼承、原型式繼承等內容,需要的朋友可以參考下
    2015-02-02
  • 使用typeof判斷function是否存在于上下文

    使用typeof判斷function是否存在于上下文

    這篇文章主要介紹了使用typeof判斷function是否存在于上下文,在窗口加載時,使用typeof進行判斷,需要的朋友可以參考下
    2014-08-08
  • JavaScript之filter_動力節(jié)點Java學院整理

    JavaScript之filter_動力節(jié)點Java學院整理

    filter也是一個常用的操作,它用于把Array的某些元素過濾掉,然后返回剩下的元素。下面通過實例代碼給大家簡答介紹下javascript中的filter,需要的的朋友參考下吧
    2017-06-06
  • js實現(xiàn)公告自動滾動

    js實現(xiàn)公告自動滾動

    這篇文章主要為大家詳細介紹了js實現(xiàn)公告自動滾動,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2022-05-05

最新評論