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

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

那 挺 麻烦的 。原生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>

.style.display="none";
.style.visibility="hidden"; 设置一个name属性，批量隐藏，可以看下这个案例

<!DOCTYPE html>
<html>

    <head>
        <style> </style>

        <meta charset="utf-8">
        <title>显示隐藏</title>
    </head>
    <body>
        <table>
            <tr>
                <td>11</td>
                <td>22</td>
                <td name="test">33</td>
            </tr>
            <tr>
                <td>11</td>
                <td>22</td>
                <td name="test">33</td>
            </tr>
            <tr>
                <td>11</td>
                <td>22</td>
                <td name="test">33</td>
            </tr>
            <table>

<script>
function myFunction(){
    var test =document.getElementsByName("test");
    for(var j=0;j<test.length;j++){  
        var tmp =test[j];
        var a=tmp.style.display
        if(a==""||a=="block"){
        tmp.style.display="none";
    }else{
        tmp.style.display="block";
        }
    }
 }
  </script><button type="button" onclick="myFunction()">点击显示或者隐藏</button>
    </body>
</html>