ruby_only1 2022-10-18 15:19 采纳率: 60%
浏览 70
已结题

js控制表格某一列隐藏和显示

想要使用js控制表格中某一列隐藏和显示,平时隐藏,在符合条件时显示,有相关的属性吗

  • 写回答

3条回答 默认 最新

  • 崽崽的谷雨 2022-10-18 16:04
    关注

    那 挺 麻烦的 。原生js 会麻烦一些 需要 获取tr 然后 循环 td 和th找到对应的 td,th隐藏 。
    看你 要哪种了 。
    1.表格是for循环出来的 。这样的话 就可以在循环的时候 去除 掉。
    2.表格写死的话 那就需要 获取 tr然后循环 了 找到对应的td,th 加样式

    <!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>Document</title>
        <style>
            table,
            tr,
            td,
            th {
                border: 1px solid red;
            }
        </style>
    </head>
    
    <body>
    
        <label for="name">姓名</label>
        <input type="checkbox" name="name" id="name" checked="checked" onchange="ss('name')" />
        <br>
        <label for="sex">性别</label>
        <input type="checkbox" name="sex" id="sex" checked="checked" onchange="ss('sex')" />
        <br>
        <label for="class">年级</label>
        <input type="checkbox" name="class" id="class" checked="checked" onchange="ss('class')" />
        <br>
        <label for="teacher">班主任</label>
        <input type="checkbox" name="teacher" id="teacher" checked="checked" onchange="ss('teacher')" />
    
        <table id="tab">
            <tr>
                <th name="name">姓名</th>
                <th name="sex">性别</th>
                <th name="class">年级</th>
                <th name="teacher">班主任</th>
            </tr>
            <tr>
                <td>1</td>
                <td>3</td>
                <td>5</td>
                <td>556</td>
            </tr>
            <tr>
                <td>2</td>
                <td>5555</td>
                <td>5555</td>
                <td>5555</td>
            </tr>
            <tr>
                <td>53</td>
                <td>5555</td>
                <td>5555</td>
                <td>5555</td>
            </tr>
        </table>
    </body>
    <script>
        function ss(id) {
            let column = document.getElementById(id); //获取 tadio元素
            let checkVal = column.checked; //获取 radio checked值
            let table = document.getElementById("tab");
            let trs = table.getElementsByTagName("tr"); //获取所有 tr
            let ths = trs[0].getElementsByTagName("th"); // 获取 th
            let xb = 0;
            for (var i = 0; i < ths.length; i++) {
                if (ths[i].getAttribute("name") == id) { 
                    xb = i;
                    if (checkVal) {
                        ths[i].style.display = "";
                    } else {
                        ths[i].style.display = "none";
                    }
                }
            }
            for (var i = 1; i < trs.length; i++) {
                let tds = trs[i].getElementsByTagName("td");
                if (checkVal) {
                    tds[xb].style.display = "";
                } else {
                    tds[xb].style.display = "none";
                }
    
            }
        }
    </script>
    
    </html>
    
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(2条)

报告相同问题?

问题事件

  • 系统已结题 10月26日
  • 已采纳回答 10月18日
  • 创建了问题 10月18日

悬赏问题

  • ¥15 (标签-python|关键词-char)
  • ¥15 python+selenium,在新增时弹出了一个输入框
  • ¥15 苹果验机结果的api接口哪里有??单次调用1毛钱及以下。
  • ¥20 学生成绩管理系统设计
  • ¥15 来一个cc穿盾脚本开发者
  • ¥15 CST2023安装报错
  • ¥15 使用diffusionbert生成文字 结果是PAD和UNK怎么办
  • ¥15 有人懂怎么做大模型的客服系统吗?卡住了卡住了
  • ¥20 firefly-rk3399上启动卡住了
  • ¥15 如何删除这个虚拟音频