js动态添加表格,全选和删除

最新推荐文章于 2024-08-08 16:36:35 发布

疯汉三

最新推荐文章于 2024-08-08 16:36:35 发布

阅读量1.4k

点赞数 1

分类专栏： javascript javascript 常用文章标签：全选删除动态创建表格 javascript

本文链接：https://blog.csdn.net/mmmv390/article/details/26504473

版权

javascript 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

javascript 常用

8 篇文章 0 订阅

订阅专栏

效果图:

代码:

js动态添加表格数据_2.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>js动态添加表格数据_2 使用insertRow和insertCell方法实现</title>

    <script type="text/javascript">

        var mailArr = [
             { "title": "一个c#问题", "name": "张三", "date": "2014-03-21" },
             { "title": "一个javascript问题", "name": "李四", "date": "2014-03-21" },
             { "title": "一个c问题", "name": "五五", "date": "2014-03-21" },
             { "title": "一个c++问题", "name": "赵六", "date": "2014-03-21" }
        ];
        var tab = null;
        window.onload = function () {
            loadTab();
            //全选
            document.getElementById("selA").onclick = function() {
                if (document.getElementById("selA").checked == true) {
                    seleAll(tab, true);
                } else {
                    seleAll(tab, false);
                }
            };            
            //删除所有的选中的
            document.getElementById("delSel").onclick = function() {
                //遍历所有的input控件即可(除了最后一个全选用的checkbox)

                var chks = document.getElementsByTagName('input');

                for (var i = chks.length - 2; i >=0; i--) {
                    var chk = chks[i];
                    if (chk.checked==true) {
                        //选中行删除处理
                        var rowNow = chk.parentNode.parentNode;
                        rowNow.parentNode.removeChild(rowNow);
                    } else {
                        alert("really");
                    }
                }
            };

        };

        function loadTab() {
            tab = document.getElementById("tb");
            //把mailArr循环遍历方式以tr的方式加入表格中
            for (var rowindex = 0; rowindex < mailArr.length; rowindex++) {
                //var tr = tab.insertRow(-1);//-1指最后一行

                var tr = tab.insertRow(tab.rows.length - 1);//插入到末二行，最后一行要给全选那一行保留着
                var td1 = tr.insertCell(-1);
                td1.innerHTML = "<input type='checkbox'/>";
                var td2 = tr.insertCell(-1);
                td2.innerHTML = mailArr[rowindex].title;
                var td3 = tr.insertCell(-1);
                td3.innerHTML = mailArr[rowindex].name;
                var td4 = tr.insertCell(-1);
                td4.innerHTML = mailArr[rowindex].date;
            }
        }
        //要使全选按钮生效，就要遍历所有的表格的行

        function seleAll(mailTab, isSel) {
            for (var i = 0; i < mailTab.rows.length; i++) {
                var tr = mailTab.rows[i];
                    tr.cells[0].childNodes[0].checked = isSel;
            }
        }
    </script>

</head>
<body>
    <table id="tb" border="1" style="border-collapse: collapse;">
        <tr>
            <th>序列</th>
            <th>标题</th>
            <th>发邮人</th>
            <th>发件时间</th>
        </tr>
        <!-- 循环增加 -->


        <!--　全选 -->
        <tr>
            <td colspan="4">
                <input id="selA" type="checkbox" /><label for="selA">全选</label>
                <a href="#" id="delSel">删除</a></td>
        </tr>
    </table>
</body>
</html>