0

5 列のテーブルがあります。画像をクリックするとテーブルの最後の 3 列を折りたたみ、他の画像をクリックすると再び表示されます。

<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>
4

2 に答える 2

1

これを試して、

ライブデモ

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

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

コメントに基づいて編集

ライブデモ

于 2013-02-04T11:49:52.603 に答える
0

非表示と表示の両方で、th:eq(4)およびの間にコンマがありません。td:eq(2)

あなたのコードに基づく実用的な例は、ここjsFiddleで見ることができます。

.live使用しているため、最新バージョンのjQueryを使用できないことに注意してください。

于 2013-02-04T21:50:57.807 に答える