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

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日

悬赏问题

  • ¥20 西门子S7-Graph,S7-300，梯形图
  • ¥50 用易语言http 访问不了网页
  • ¥50 safari浏览器fetch提交数据后数据丢失问题
  • ¥15 matlab不知道怎么改，求解答！！
  • ¥15 永磁直线电机的电流环pi调不出来
  • ¥15 用stata实现聚类的代码
  • ¥15 请问paddlehub能支持移动端开发吗？在Android studio上该如何部署？
  • ¥20 docker里部署springboot项目，访问不到扬声器
  • ¥15 netty整合springboot之后自动重连失效
  • ¥15 悬赏！微信开发者工具报错，求帮改