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