使用jQuery显示/隐藏表列 [英] show / hide table columns using jQuery

问题描述

我有一个有五列的表

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

和我有一些复选框每一个对一个列当第一复选框被选中 那么我需要显示第一列，如果未选中，则需要隐藏第一列.像那样 我需要对所有列进行操作.

and I have some check boxes each one for one column when the first checkbox is checked then I need to show the first column , if unchecked I need to hide first column. Like that I need to do for all columns.

我找到了一些答案，但没有找到任何解决方案. 操作对此不起作用.

I found some answers but I did not find any solution .First time it is hiding then other operations are not working on that.

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

请帮助我.谢谢....

Please help me .Thanks in advance....

推荐答案

在这里，完整的解决方案:

Here you go, full solution:

http://jsfiddle.net/vXBtP/

并在此处更新: http://jsfiddle.net/vXBtP/5/

<table>
   <thead>
       <td><input type="checkbox" checked="checked" /></td>
       <td><input type="checkbox" checked="checked" /></td>
       <td><input type="checkbox" checked="checked" /></td>
       <td><input type="checkbox" checked="checked" /></td>
       <td><input type="checkbox" checked="checked" /></td>
    </thead>
    <tbody>
    <tr>
       <td>column 1</td>
        <td>column 2</td>
        <td>column 3</td>
        <td>column 4</td>
        <td>column 5</td>
    </tr>
    </tbody>
</table>

$(document).on('change', 'table thead input', function() {
    var checked = $(this).is(":checked");

    var index = $(this).parent().index();
    if(checked) {
        $('table tbody tr td').eq(index).show();
    } else {
        $('table tbody tr td').eq(index).hide();
    }
});

这篇关于使用jQuery显示/隐藏表列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！