jquery - 折叠表格的列

Question

我确实有一个 5 列的表格。我想在单击图像时折叠表格的最后三列，然后在单击其他图像时再次出现。我已经编写了一些代码，但它不起作用，所以请指导我：

<img id="hide" src="assets/img/decrease_indent.png" />
        <img id="show" src="assets/img/increase_indent.png" />

<thead>
                <tr>
                    <th class="">Name</th>
                    <th class=""></th>
                    <th class="">Dur</th>
                    <th class="">Start</th>
                    <th class=""></th>
                </tr>
            </thead>
            <tbody data-bind="foreach:items">
                <tr  data-bind="value:id">
                    <td data-bind="text:"></td>
                    <td></td>
                    <td  data-bind="text:"></td>
                    <td data-bind="text:"></td>
                    <td data-bind="text:"></td>
                </tr>
            </tbody>



    <script type="text/javascript">
$(function(){
        $("#hide").live('click',function(){
        $("th:eq(2),th:eq(3),th:eq(4)td:eq(2),td:eq(3),td:eq(4)").hide();
        });
        $("#show").live('click',function(){
        $("th:eq(2),th:eq(3),th:eq(4)td:eq(2),td:eq(3),td:eq(4)").show();
        });
});
        </script>

Answer 1

试试这个，

现场演示

//To hide
$('th:gt(2)').hide();
$('td:gt(2)').hide();

//To show
$('th:gt(2)').show();
$('td:gt(2)').show();

根据评论编辑

现场演示

Answer 2

你错过了隐藏和显示th:eq(4)之间的逗号。td:eq(2)

在jsFiddle可以看到基于您的代码的工作示例。

请注意，当您使用.live时，您不能使用最新版本的 jQuery。