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

news2025/1/9 15:39:37

写个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)
    }

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/717414.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

趣谈MySQL 多个%等模糊查询

一、建表并插入数据 1、创建一个people表 DROP TABLE IF EXISTS people; CREATE TABLE people (id int NOT NULL COMMENT 主键,name varchar(45) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NOT NULL COMMENT 姓名,sex tinyint NOT NULL COMMENT 性别,age int NOT N…

怎样优雅地增删查改(一):从0开始搭建Volo.Abp项目

软件系统中数据库或者持久层的基本操作功能可以用Curd描述&#xff0c;Curd即 增加&#xff08;Create&#xff09;、更新&#xff08;Update&#xff09;、读取查询&#xff08;Retrieve&#xff09;和删除&#xff08;Delete&#xff09;&#xff0c; 这4个单词的首字母。 在…

Elasticsearch(2)——映射关系

1 什么是映射 映射&#xff08;mapping&#xff09;就像数据库中的 Schema &#xff0c;描述了文档可能具有的字段或属性、每个字段的 数据类型&#xff0c;比如 Text&#xff0c;Keyword&#xff0c;Integer 或 Date &#xff0c;以及 Lucene 是如何索引和存储这些字 段的。 …

VS Code安装及配置教程(Windows)

VS Code安装教程&#xff08;Windows&#xff09; 一、下载1、官网下载&#xff1a;2、网盘下载 二、安装 一、下载 1、官网下载&#xff1a; 点击跳转 2、网盘下载 点击跳转 二、安装 双击运行程序&#xff0c;进行安装&#xff0c;同意许可&#xff0c;点击下一步 选择…

轻松拿捏Jenkins(Linux)+Java11+Docker自动化打包部署

注&#xff1a;本文由笔者小白亲手实践写作&#xff0c;涵盖较全&#xff0c;创作不易&#xff0c;且行且珍惜&#xff01;&#xff01; 历时24小时&#xff0c;包含Jenkins环境构建部署过程中的99%问题&#xff0c;确定不来看一下吗&#xff1f; 文章目录 开篇一、软件包准备J…

华为OD机试真题 Python 实现【任务总执行时长】【2023Q1 100分】

目录 一、题目描述二、输入描述三、输出描述四、补充说明五、解题思路六、Python算法源码七、效果展示1、输入2、输出3、说明 一、题目描述 任务编排服务负责对任务进行组合调度。 参与编排的任务有两种类型&#xff0c;其中一种执行时长为taskA&#xff0c;另一种执行时长为…

Linux项目自动化构建工具——make和makefile

make和makefile 一.基本使用二.make并不是每一次都会进行编译三.原理四.特殊符号 一.基本使用 首先创建一个mycode.c文件&#xff0c;接着使用vim写几行代码。 接着创建一个makefile文件&#xff08;这里的m大写小写均可但需要在当前目录下&#xff09;&#xff0c;并使用vim进…

C语言 - unicode编码与字符串互转

概述 最近项目上需要unicode编码与字符串互转&#xff0c;在此做个笔录。 1、编码环境为 visual studio 21&#xff0c;code如下&#xff1a; #include <stdlib.h> #include <stdio.h> #include <string.h> #include <wchar.h> #include <locale.…

Java SpringBoot集成WebSocket

SpringBoot集成WebSocket 引入依赖WebSocket配置拦截器配置总体配置类WebSocket服务类 控制层测试测试使用在线连接工具&#xff08;自行百度&#xff09;连接地址&#xff1a;ws://IP端口号/websocket测试发送消息测试 公众号&#xff1a;一颗星宇宙 引入依赖 <dependency…

液晶铝薄膜的干蚀特性

引言 对于先进的薄膜晶体管液晶显示器(TFT-LCD)制造工艺来说&#xff0c;薄膜层已逐渐取代传统的湿法蚀刻工艺。对于栅电极&#xff0c;一般使用铝(Al)&#xff0c;在Al中加入一些金属&#xff0c;除了可以保持低电阻率和增强Al薄膜的耐腐蚀性外&#xff0c;还可以防止在后退火…

these parameters are deprecated, see docs for addKeyword

在使用json schema中的自定义关键字时发生该报错&#xff0c;因为直接第一个参数直接传keyname&#xff0c;如下 但是这种方法已经弃用&#xff0c;应该用官方支持的写法&#xff0c;不要直接传keyword,以键值对形式写出来&#xff0c;也有可能是其他书写不规范造成的问题&am…

嵌入式系统移植

一、系统分层 移植的目的 不同架构的处理器指令集不兼容&#xff0c;即便是相同的处理器架构&#xff0c;板卡不同驱动代码也不兼容 Linux是一个通用的内核并不是为某一个特定的处理器架构或板卡设计的&#xff0c;所以从官方获取Linux源码后我们要先经过相应的配置使其与我们当…

企业src-白帽赚钱的合理途径

0、什么是src 安全响应中心&#xff08;Security Response Center&#xff09;&#xff1a;SRC通常是一个组织或者公司设立的部门或团队&#xff0c;负责接收、跟踪和响应安全漏洞报告&#xff0c;以及协调修补措施。SRC与安全研究人员和其他报告者合作&#xff0c;以确保及时…

FastDFS【FastDFS概述(简介、核心概念 、上传机制 、下载机制)】(一)-全面详解(学习总结---从入门到深化)

目录 为什么要使用分布式文件系统 FastDFS概述_简介 FastDFS概述_核心概念 FastDFS概述_上传机制 FastDFS概述_下载机制 为什么要使用分布式文件系统 单机时代 初创时期由于时间紧迫&#xff0c;在各种资源有限的情况下&#xff0c;通常就直接在 项目目录下建立静态文件夹…

CentOs7 阿里云如何做云盘扩容?

不罗嗦直接说主题&#xff1a; 在开发中遇到得问题&#xff1a;磁盘满了&#xff0c;删又不知道从何下手&#xff0c;万一删错了那就是巨大得灾难&#xff0c;所以我们就需要磁盘扩容&#xff0c;当然磁盘为什么满&#xff1f;怎么排查以后再说&#xff0c;这里主要是说磁盘如…

Windows PCL GPU版本编译过程

网上教程很少&#xff0c;但是想用PCL GPU功能&#xff0c;于是决定自己踩坑&#xff0c;我有几个不同的环境组合&#xff1a; (1)win10cuda10.0vs2019PCL1.11.1cmake3.18.5&#xff08;失败&#xff09; (2)win10cuda11.2vs2019PCL1.11.1cmake3.18.5&#xff08;成功&#x…

【算法|动态规划系列No.5】leetcode62. 不同路径

个人主页&#xff1a;平行线也会相交 欢迎 点赞&#x1f44d; 收藏✨ 留言✉ 加关注&#x1f493;本文由 平行线也会相交 原创 收录于专栏【手撕算法系列专栏】【LeetCode】 &#x1f354;本专栏旨在提高自己算法能力的同时&#xff0c;记录一下自己的学习过程&#xff0c;希望…

No7.精选前端面试题,享受每天的挑战和学习

文章目录 详细说明下 Composition Api 与 Vue 2.x使用的Options Api详细说明下Proxy和Object.defineProperty详细说明下Loader和Plugin分析下vue2.0和vue3.0的原理vue3和react的异同点 详细说明下 Composition Api 与 Vue 2.x使用的Options Api Composition API 是 Vue 3 中引…

弱网测试(Charles模拟)

一、介绍 移动应用的网络环境多样&#xff0c;而且会出现在不同网络之间切换的场景&#xff0c;即使是在同一网络环境下&#xff0c;也会出现网络连接状态时好时坏的情况&#xff0c;比如时高时低的延迟、经常丢包、频繁断线&#xff0c;在乘坐地铁、穿越隧道&#xff0c;和地…

今日大模型日报

XPhoneBERT&#xff5c;文本到语音转换的音素表示的预训练多语言模型 XPhoneBERT: A Pre-trained Multilingual Model for Phoneme Representations for Text-to-Speech Linh The Nguyen, Thinh Pham, Dat Quoc Nguyen Github地址&#xff1a;https://github.com/VinAIResearch…