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

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 用土力学知识进行土坡稳定性分析与挡土墙设计
  • ¥70 PlayWright在Java上连接CDP关联本地Chrome启动失败,貌似是Windows端口转发问题
  • ¥15 帮我写一个c++工程
  • ¥30 Eclipse官网打不开，官网首页进不去，显示无法访问此页面，求解决方法
  • ¥15 关于smbclient 库的使用
  • ¥15 微信小程序协议怎么写
  • ¥15 c语言怎么用printf（“\b \b”）与getch（）实现黑框里写入与删除？
  • ¥20 怎么用dlib库的算法识别小麦病虫害
  • ¥15 华为ensp模拟器中S5700交换机在配置过程中老是反复重启
  • ¥15 uniapp uview http 如何实现统一的请求异常信息提示？