Javascript 使用jQuery显示/隐藏表列

我有一张五列的桌子

column1 column2 column3 column4 column5
------- ------- ------- ------- -------

当选中第一个复选框时，我有一些复选框，每个复选框对应一列 然后我需要显示第一列，如果未选中，我需要隐藏第一列。那样 我需要为所有栏目做些什么

我找到了一些答案，但我没有找到任何解决办法。第一次是隐藏，然后是另一次 运营部没有在这方面开展工作

 $('#tableId td:nth-child(column number)').hide();

请帮帮我。提前谢谢……

根据专栏的不同#你想隐藏，请使用这个被盗的一行：

$('td:nth-child(2)').hide();

如果你使用

$('td:nth-child(2),th:nth-child(2)').hide();

---

您可以获取表的标题索引，并隐藏表标题和td元素。类似这样的情况
假设表头的索引为index=2

var index= tableHeaderIndex; // 2 here

$('th:nth-child('+index+')').hide();
$('td:nth-child('+index+')').hide();

---

给你，完整的解决方案：

更新如下：

第1栏
第2栏
第3栏
第4栏
第5栏
$（文档）.on（'change'，'table thead input'，function（）{
var checked=$（this）.is（“：checked”）；
var index=$（this.parent（）.index（）；
如果（选中）{
$（'table tbody tr td'）.eq（index.show（）；
}否则{
$（'table tbody tr td'）.eq（index.hide（）；
}
});

喜欢

绑在一起很快，但应该工作

<table id="TabToHide">
    <tr>
        <td class="Col1">Col 1</td>
        <td class="Col2">Col 2</td>
        <td class="Col3">Col 3</td>
        <td class="Col4">Col 4</td>
        <td class="Col5">Col 5</td>
    </tr>
    <tr>
        <td class="Col1">Stuff 1</td>
        <td class="Col2">Stuff 2</td>
        <td class="Col3">Stuff 3</td>
        <td class="Col4">Stuff 4</td>
        <td class="Col5">Stuff 5</td>
    </tr>    
</table>

<br />

<table>
    <tr>
        <td><input name="Col1" type="checkbox" checked="checked" /></td>
        <td><input name="Col2" type="checkbox" checked="checked" /></td>
        <td><input name="Col3" type="checkbox" checked="checked" /></td>
        <td><input name="Col4" type="checkbox" checked="checked" /></td>
        <td><input name="Col5" type="checkbox" checked="checked" /></td>
    </tr>
</table>

---

如果我明白你的意思，你可以使用

tr-th，tr-td

和

nth-child

选择器使它变得非常简单。您可以根据索引进行操作，但需要添加1，因为在jQuery中，第n个子项不像元素那样索引为0。而且JS也不一定要画出来。我应该提到的是，将

tr

放在

td:nth

之前非常重要，因为您不希望“只需要第nth个td”。如果是这样，就不会隐藏每行上的每一列

---

仅供参考：如果你想要看起来更“干净”的东西（比如turbotax网站），不要隐藏td本身。相反，将其略宽于最大的文本，并将每段文本放在每个单元格内的

p

或

div

标记内。然后更改

列

选择器，以获取每个单元格的内部元素并将其隐藏

---

HTML

显示和隐藏表中的列
$（函数（）{
var$chk=$（“#grpChkBox输入：复选框”）；
var$tbl=$（“#someTable”）；
$chk.prop（'勾选'，正确）；
$chk.单击（函数（）{
var colToHide=$tbl.find（“.”+$（this.attr（“name”））；
$（colToHide.toggle（）；
});
});
显示和隐藏表中的列
单击每个复选框以隐藏相应的列

员工ID

名字

姓

电子邮件

电话

埃皮德
名字
姓
电子邮件
电话
E342
比尔
埃文斯
Bill@devcurry.com
234-2345-2345
E343
劳拉
马特
laura@devcurry.com
123-1234-5678
E344
内存
古玛
ram@devcurry.com
345-3456-7890

如果您在

td

s上包含一些html pleaseUse类，那就太好了。如果您使用的是实际的html表格，那么什么不起作用？我们能看到代码吗？我用了上面的代码。第一次它起作用了。但是第二次它不起作用了。仅供参考，更新了我的答案，让你充分解释发生了什么，并显示了你在工作中的确切要求。我只是在你的问题中看到了更多信息，看起来你尝试了这个。您需要像在问题中那样指定表，但这应该可以工作。实际上，我在表的外部有复选框，无论它们在哪里，您只需要将它们放在容器中，然后.index（）仍然可以工作。因此，即使您的所有内容都在一个表中，上面的示例仍然有效。@Chris如果表标题中有colspan怎么办？

<table id="TabToHide">
    <tr>
        <td class="Col1">Col 1</td>
        <td class="Col2">Col 2</td>
        <td class="Col3">Col 3</td>
        <td class="Col4">Col 4</td>
        <td class="Col5">Col 5</td>
    </tr>
    <tr>
        <td class="Col1">Stuff 1</td>
        <td class="Col2">Stuff 2</td>
        <td class="Col3">Stuff 3</td>
        <td class="Col4">Stuff 4</td>
        <td class="Col5">Stuff 5</td>
    </tr>    
</table>

<br />

<table>
    <tr>
        <td><input name="Col1" type="checkbox" checked="checked" /></td>
        <td><input name="Col2" type="checkbox" checked="checked" /></td>
        <td><input name="Col3" type="checkbox" checked="checked" /></td>
        <td><input name="Col4" type="checkbox" checked="checked" /></td>
        <td><input name="Col5" type="checkbox" checked="checked" /></td>
    </tr>
</table>

   $('input:checkbox').change(function(){
   var ColToHide = $(this).attr("name");    
    if(this.checked){
        $("td[class='" + ColToHide + "']").show();        
    }else{
        $("td[class='" + ColToHide + "']").hide();
    }

    $('div#Debug').text("hiding " + ColToHide);
});

<table>
    <thead>
        <tr>
            <th>
                <input id="chk1" type="checkbox" />
            </th>
            <th>
                <input id="chk1" type="checkbox" />
            </th>
            <th>
                <input id="chk1" type="checkbox" />
            </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                col1
            </td>
            <td>
                col2
            </td>
            <td>
                col3
            </td>
        </tr>
        <tr>
            <td>
                col1
            </td>
            <td>
                col2
            </td>
            <td>
                col3
            </td>
        </tr>
        <tr>
            <td>
                col1
            </td>
            <td>
                col2
            </td>
            <td>
                col3
            </td>
        </tr>
        <tr>
            <td>
                col1
            </td>
            <td>
                col2
            </td>
            <td>
                col3
            </td>
        </tr>
    </tbody>
</table>
<button>Reset</button>

$(function() {
    //  Selects your table by id, then the input checkboxes inside the table, you can 
    //  alternate this call with classnames on your inputs if you're going to have 
    //  more inputs than what's desired in call here.
        //  also note i'm using the "change" function and not "click", this simply 
        //  provides easier control of what's going on with your inputs and makes 
        //  later calls (like reset) a much easier call. Less thinking required
    $("#tableId input[type=checkbox]").on("change", function(e) {
        //  First variable grabs the inputs PARENT index, this is the TH containing 
        //  the input, thus the column you want hidden.
        //  The second is calling ALL TH's && TD's having that same index number
        var id = $(this).parent().index()+1,
            col = $("table tr th:nth-child("+id+"), table tr td:nth-child("+id+")");
        //  This simple inline "if" statement checks if the input is checked or now
        //  and shows the columns based on if it IS checked
        $(this).is(":checked") ? col.show() : col.hide();
    }).prop("checked", true).change(); // here i set all inputs to checked without having to write it in the above HTML

    $("button").on("click", function(e) {
        $("input[type=checkbox]").prop("checked", true).change();
    });
})

 $(document).ready(function(){
    $('table tr input:checkbox').change(function(){
        var num = $(this).parents("th").index(); 
        alert(num);
        if($(this).is(":checked"))
        {

            $('table tbody tr td').eq(num).show();   
        }else
        {
            $('table tbody tr td').eq(num).hide(); 
        }

    });
});

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Show and Hide Columns in a Table</title>
    <link href="CSS/table.css" rel="stylesheet" />
    <script src="scripts/jquery-1.11.1.min.js"></script>
    <script>
        $(function () {
            var $chk = $("#grpChkBox input:checkbox");
            var $tbl = $("#someTable");
            $chk.prop('checked', true);
            $chk.click(function () {
                var colToHide = $tbl.find("." + $(this).attr("name"));
                $(colToHide).toggle();
            });
        });
    </script>
</head>
<body>
    <h2>Show and Hide Columns in a Table</h2>
    <p>Click on each Checkbox to hide corresponding Column</p>
    <div id="grpChkBox">
        <p><input type="checkbox" name="empid" /> Employee ID</p>
        <p><input type="checkbox" name="fname" /> First Name</p>
        <p><input type="checkbox" name="lname" /> Last Name</p>
        <p><input type="checkbox" name="email" /> Email</p>
        <p><input type="checkbox" name="phone" /> Phone</p>
    </div>

    <table id="someTable">
        <thead>
            <tr>
                <th class="empid">EmpId</th>
                <th class="fname">First Name</th>
                <th class="lname">Last Name</th>
                <th class="email">Email</th>
                <th class="phone">Phone</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="empid">E342</td>
                <td class="fname">Bill</td>
                <td class="lname">Evans</td>
                <td class="email">Bill@devcurry.com</td>
                <td class="phone">234-2345-2345</td>
            </tr>
            <tr>
                <td class="empid">E343</td>
                <td class="fname">Laura</td>
                <td class="lname">Matt</td>
                <td class="email">laura@devcurry.com</td>
                <td class="phone">123-1234-5678</td>
            </tr>
            <tr>
                <td class="empid">E344</td>
                <td class="fname">Ram</td>
                <td class="lname">Kumar</td>
                <td class="email">ram@devcurry.com</td>
                <td class="phone">345-3456-7890</td>
            </tr>
        </tbody>
    </table>

</body>
</html>