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

试试这个，

<强> Live Demo

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

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

根据评论进行编辑

<强> Live Demo

Answer 2

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

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

请注意，在使用.live时，您无法使用最新版本的jQuery。

折叠表的列

2 个答案: