原生 js （前后端不分离）复选框动态控制表格列的显示隐藏存储状态

最新推荐文章于 2024-05-21 18:30:03 发布

小崔一打五

最新推荐文章于 2024-05-21 18:30:03 发布

阅读量288

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/weixin_58437310/article/details/131509148

版权

该代码示例展示了如何通过JavaScript绑定点击事件到一个div上，当点击时显示或隐藏复选框，并利用sessionStorage保存和恢复复选框的状态。同时，它动态生成复选框列表，并根据存储的值设置默认选中状态。

摘要由CSDN通过智能技术生成

写个div 绑定点击事件 点击设置按钮 让div和复选框显示
<div class="control" οnclick="controlClk()">❁</div>

     init()
    // var storeCheckbox = window.sessionStorage.getItem('storeCheckbox');
    function getStore(name) {
        var storeCheckbox = window.sessionStorage.getItem(name);

        //有存的话去取到对应的值
        if (storeCheckbox) {
            return storeCheckbox
        } else {
            //没有就默为true
            return false
        }
    }

    function setStore(name, list) {
        window.sessionStorage.setItem(name, list)
    }

    function init() {
        //获取表头tr下面的th
        var th = document.getElementById('thead').children[0].children;
        var coList = [];
        //遍历th
        for (var index = 0; index < th.length; index++) {
            var element = th[index];
            //判断th是否有子级，剔除掉明细和操作显示的th
            if (!element.childElementCount) {
                coList.push(element.innerHTML)
            }
        }

        //动态添加控制显示隐藏的每一条
        var str = '';
        for (var index = 0; index < coList.length; index++) {
            var element = coList[index];
            str += '<input class="check_default" type="checkbox" id="element'+index+'" onchange="checkFunction(' + index + ',this)">'
                +'<label style="display: inline !important;" for="element'+index+'">'
                + element +
                '<br/>';
        }
        controlHead.innerHTML = str;

        var storeList = getStore('autoTable');
        var solitList = [];
        if (storeList) {
            solitList = storeList.split(',');
        }
        //checkbox默认为选中状态

        var checkboxList = document.getElementsByClassName('check_default');
        for (var index = 0; index < checkboxList.length; index++) {
            var element = checkboxList[index];
            checkFunction(index, {checked: solitList[index] ? JSON.parse(solitList[index]) : true})
            solitList[index] ? element.checked = JSON.parse(solitList[index]) : element.checked = true
        }
    }
    var conIs = true;
    function controlClk(){
        var controlHead = document.getElementById('controlHead');
        if (conIs) {
            controlHead.style.display = "block";
            conIs = false;
        } else {
            controlHead.style.display = "none";
            conIs = true;
        }
        setClient();
    }

    function setClient() {
        var control = document.getElementsByClassName('control')[0];
        var ele = control.getBoundingClientRect();
        var controlHead = document.getElementById('controlHead');
        controlHead.style.top = ele.top + 20 + 'px';
        var eleLeft = ele.left - 192;
        if (ele.left - 192 < 0) {
            eleLeft = ele.left
        }
        controlHead.style.left = eleLeft + 20 + 'px';
    }

    //checkbox改变触发
    function checkFunction(i, obj, is = true) {
        var th = document.getElementById('thead').children[0].children;
        var num = document.getElementById('tbody').children

        for(var j=0;j<num.length;j++){
            var tbody = document.getElementById('tbody').children[j].children;
            obj.checked ? tbody[i].style.display = 'table-cell' : tbody[i].style.display = 'none';
        }
        obj.checked ? th[i].style.display = 'table-cell' : th[i].style.display = 'none';
        if (is) {
            checkClick();
        }
        setClient()
    }

    //点击多选
    function checkClick() {
        var checkboxList = document.getElementsByClassName('check_default');
        var list = [];
        for (var index = 0; index < checkboxList.length; index++) {
            var element = checkboxList[index];
            list.push(element.checked);
        }
        setStore('autoTable',list)
    }