使用jQuery显示/隐藏表列

Question

我有一个五列的表

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

当第一个复选框被选中时,我有一个复选框,每个复选框,然后我需要显示第一列,如果未选中,我需要隐藏第一列.就像我需要为所有列做的那样.

我找到了一些答案,但我没有找到任何解决方案.第一次隐藏然后其他操作无法解决.

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

请帮帮我.谢谢...

Answer 1

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

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();
    }
});

Answer 2

根据您想要隐藏的列#，使用这个偷来的衬里：

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

如果你使用

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