用js创建表格及全选反选

最新推荐文章于 2023-07-11 22:34:21 发布

绘梨衣的Sakura

最新推荐文章于 2023-07-11 22:34:21 发布

阅读量403

点赞数

文章标签： javascript js

本文链接：https://blog.csdn.net/Azhongpu/article/details/111743432

版权

用js创建表格及全选反选

用js代码来实现创建表格，及全选反选，代码效果图如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 创建一个创建元素的函数
        function chuang(id) {
            return document.createElement(id)
        }
        // 首先创建一个大盒子
        var box = chuang('div')
            // 然后把它放到文档body里
        document.body.appendChild(box)
            // 设置盒子样式宽和外边距
        box.style.width = '600px'
        box.style.margin = '100px auto'
            // 再创建table元素
        var tables = chuang('table')
            // 放到box大盒子里
        box.appendChild(tables)
            // 设置table样式
        tables.style.width = "600px"
            // 边框
        tables.style.border = '1px solid #ccc'
            // 内容居中
        tables.style.textAlign = 'center'
            // 边框合并在一起
        tables.style.borderCollapse = 'collapse'
            // 边框之间的间距
        tables.style.borderSpacing = 0
            // 在创建表头thead
        var thead = chuang('thead')
            // thead背景颜色
        thead.style.backgroundColor = '#ff3040'
            // 把thead放到table里
        tables.appendChild(thead)
            // 创建表格内容tbody
        var tbody = chuang('tbody')
            // 背景颜色设置
        tbody.style.backgroundColor = '#ddd'
            // 再把tbody放到table里
        tables.appendChild(tbody)
            // 创建表头的tr
        var th_tr = chuang('tr')
        th_tr.style.height = '40px'
        thead.appendChild(th_tr)
            // 创建input元素
        var inps = chuang('input')
            // 使input type为checkbox
        inps.type = 'checkbox'
            // 把表头的数据放进一个数组
        var arr = [inps, '商品', '价钱']
            // 然后利用循环依次把数据放进th里
        for (var i = 0; i < 3; i++) {
            // 循环创建th
            var th = chuang('th')
            th.style.border = '1px solid #ccc'
            th.style.color = '#fff'
                // 判断因为第一个数据是添加元素所以在这里做判断
            if (i == 0) {
                th.appendChild(arr[i])
            } else {
                th.innerText = arr[i]
            }
            th_tr.appendChild(th)
        }
        // 然后在把tbody里的数据放进一个数组里
        var data = [{
            bian: inps,
            sp: 'iPhone12',
            jg: 8000
        }, {
            bian: inps,
            sp: 'Apple Watch',
            jg: 3000
        }, {
            bian: inps,
            sp: '扫地机器人',
            jg: 2000
        }, {
            bian: inps,
            sp: '戴森无扇叶风扇',
            jg: 4500
        }, {
            bian: inps,
            sp: '小爱同学',
            jg: 900
        }, ]

        // 利用循环吧数据依次放进去
        for (var i = 0; i < data.length; i++) {
            // 循环创建tr
            var tb_tr = chuang('tr')
                // 这里有重新再创建input，因为开始inps只有一个，在这里再循环创建多个
            var td_inps = chuang('input')
            td_inps.type = 'checkbox'
            tb_tr.style.height = '40px'
                // 再用遍历循环数组里的对象
            for (var k in data[i]) {
                // 创建td
                var td = chuang('td')
                td.style.border = '1px solid #ccc'
                    // k 为 bian时td添加td_inps
                if (k == 'bian') {
                    td.appendChild(td_inps)
                } else {
                    td.innerText = data[i][k]
                }
                // 依次循环添加td
                tb_tr.appendChild(td)
            }
            //再依次循环把tb_tr添加到tbody
            tbody.appendChild(tb_tr)
        }
        // 创建反选按钮
        var btn = chuang('input')
        btn.type = 'button'
        btn.style.margin = '20px 0 0 0'
        btn.style.width = '100px'
        btn.style.height = '50px'
        btn.value = '反选'
            // 把反选按钮添加到box大盒子
        box.appendChild(btn)
            // 获取tbody整个input
        var tbody_ipt = tbody.getElementsByTagName('input')
            // console.log(tbody_ipt);
            // 给th的input全选按钮添加点击事件
        inps.onclick = function() {
                for (var i = 0; i < tbody_ipt.length; i++) {
                    // 当全选选中时，下面的tbody的input全部选中，否则取消的时候全部取消
                    if (inps.checked) {
                        tbody_ipt[i].checked = 'checked'
                    } else {
                        tbody_ipt[i].checked = ''
                    }
                }
            }
            // 判断tbody的input选中时，当下面一个没选中全选就不选中
        function paduan() {
            // 给个a为true的变量
            var a = true
            for (var i = 0; i < tbody_ipt.length; i++) {
                // 循环当tbody中的input没选，变量a就为false
                if (!tbody_ipt[i].checked) {
                    a = false
                }
            }
            // 然后在让全选按钮checked等于a
            inps.checked = a
        }
        // 循环tbody的input给每个input点击事件
        for (var i = 0; i < tbody_ipt.length; i++) {
            // 让input点击事件等于上面的函数
            tbody_ipt[i].onclick = paduan
        }
        // 给反选按钮点击事件
        btn.onclick = function() {
            for (var i = 0; i < tbody_ipt.length; i++) {
                // 让这里的checked等于取反的checked在应用上面的封装好的判断函数，就完成反选了
                tbody_ipt[i].checked = !tbody_ipt[i].checked
            }
            paduan()
        }
    </script>
</body>


</html>

效果图
在这里插入图片描述
点击全选，下面的全部选中

下面一个没选，全选就不选

点击反选时效果

绘梨衣的Sakura

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用js创建表格及全选反选

用js创建表格及全选反选用js代码来实现创建表格，及全选反选，代码效果图如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title>&l
复制链接

扫一扫