49

私は非常に長い 3 列のテーブルを持っています。私はしたいと思います

<table>
    <tr><td>Column1</td><td>Column2</td></tr>
    <tr><td>Column1</td><td>Column2</td></tr>
    <tr><td>Start</td><td>Hiding</td></tr>
    <tr><td>Column1</td><td>Column2</td></tr>
    <tr><td>Column1</td><td>Column2</td></tr>
    <tr><td>Column1</td><td>Column2</td></tr>
    <tr><td>End</td><td>Hiding</td></tr>
    <tr><td>Column1</td><td>Column2</td></tr>
    <tr><td>Column1</td><td>Column2</td></tr>
</table>

これは、jQuery を使用して取得しようとしている結果です。

Column1  Column2
Column1  Column2
...Show Full Table...
Column1  Column2
Column1  Column2

テーブルを最小化するために jQuery の表示/非表示機能を使用したいと思いますが、それでも上部と下部の行の一部を表示します。中央の行は「テーブル全体を表示」のようなテキストに置き換える必要があります。クリックすると、テーブル全体が最初から最後まで表示されるように展開されます。

jQueryでこれを行う最良の方法は何ですか?

ところで、すでにクラス「Table_Middle」をいくつかの行に追加しようとしましたが、完全に非表示にすることはできません。占有されているスペースがまだそこにあり、ユーザーにテーブルを展開する方法を提供するテキストがありません完全に。

[編集] Parand の投稿された回答に触発された動作例の HTML を追加

以下の例は完全に機能する例です。jquery をダウンロードする必要さえありません。空白の HTML ファイルに貼り付けるだけです。

Javascriptがオフになっている場合、完全なテーブルのみを表示するのはうまく機能しません。Javascript がオンの場合、中央の表の行が非表示になり、表示/非表示のリンクが追加されます。

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
        <title>Example Show/Hide Middle rows of a table using jQuery</title>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $("#HiddenRowsNotice").html("<tr><td colspan='2'> <a href='#'>>> some rows hidden <<</a></td></tr>");
                $("#ShowHide").html("<tr><td colspan='2'><a href='#'>show/hide middle rows</a></td></tr>");
                $("#HiddenRows").hide();

                $('#ShowHide,#HiddenRowsNotice').click( function() {
                    $('#HiddenRows').toggle();  
                    $('#HiddenRowsNotice').toggle();
                });
            });
        </script>
    </head>
    <body>
        <table>
            <tbody id="ShowHide"></tbody>
                <tr><th>Month Name</th><th>Month</th></tr>
            <tbody>
                <tr><td>Jan</td><td>1</td></tr>    
            </tbody>
            <tbody id="HiddenRowsNotice"></tbody>
            <tbody id="HiddenRows">
                <tr><td>Feb</td><td>2</td></tr>
                <tr><td>Mar</td><td>3</td></tr>
                <tr><td>Apr</td><td>4</td></tr>    
            </tbody>
            <tbody>
                <tr><td>May</td><td>5</td></tr>            
            </tbody>
        </table>
    </body>
</html>

[編集] 私のブログ投稿と実際の例をリンクします。

4

6 に答える 6

56

このようなものはうまくいくかもしれません：

<table>
    <tbody>
      <tr><td>Column1</td><td>Column2</td></tr>
      <tr><td>Column1</td><td>Column2</td></tr>
      <tr class="Show_Rows"><td>Start</td><td>Hiding</td></tr>
    </tbody>
    <tbody class="Table_Middle" style="display:none">
      <tr><td>Column1</td><td>Column2</td></tr>
      <tr><td>Column1</td><td>Column2</td></tr>
      <tr><td>Column1</td><td>Column2</td></tr>
    </tbody>
    <tbody>
      <tr class="Show_Rows"><td>End</td><td>Hiding</td></tr>
      <tr><td>Column1</td><td>Column2</td></tr>
      <tr><td>Column1</td><td>Column2</td></tr>
    </tbody>
</table>


$('#something').click( function() {
    $('.Table_Middle').hide();
    $('.Show_Rows').show();
});

$('.Show_Rows').click( function() { 
    $('.Show_Rows').hide();
    $('.Table_Middle').show();
});
于 2008-10-18T16:33:00.390 に答える
4

これは、余分なマークアップを必要とせず、うまく劣化するソリューションです。

<table id="myTable">
    <tbody>
        <tr><td>Cell</td><td>Cell</td></tr>
        <tr><td>Cell</td><td>Cell</td></tr>
        <tr><td>Cell</td><td>Cell</td></tr>
        <tr><td>Cell</td><td>Cell</td></tr>
        <tr><td>Cell</td><td>Cell</td></tr>
    </tbody>
</table>

classそしてjQuery...ここでいくつかのことをハードコーディングしました（テーブル識別子、表示する行数など。再利用可能にしたい場合は、これらをテーブルの属性に入れることができます。（例： ：）<table class="hidey_2">_

var showTopAndBottom = 2,
    minRows = 4,
    $rows = $('#myTable tr').length),
    length = $rows.length
;
if (length > minRows) {
    $rows
        .slice(showTopAndBottom, length - showTopAndBottom)
        .hide()
    ;
    $rows
        .eq(showTopAndBottom - 1)
        .after(
            // this colspan could be worked out by counting the cells in another row
            $("<tr><td colspan=\"2\">Show</td></tr>").click(function() {
                $(this)
                    .remove()
                    .nextAll()
                    .show()
                ;
            })
        )
    ;
}
于 2008-10-20T01:39:34.517 に答える
4

スライス（）メソッドを使用してみてください。

$("#table tr").slice(1, 4).hide();
于 2009-10-23T20:05:33.507 に答える
4

最も簡単な方法は、行をグループ化するために in を追加し、それを と の間で<tbody>切り替えることです(例外をキャッチし、IE の場合は に設定します)。jqueryに固有のものにするかどうかはわかりませんが、それが「通常の」方法です。nonetable-row-groupblock

于 2008-10-18T16:27:43.303 に答える
2

中間<tr />タグに " Table_Middle" クラスを指定すると、はるかに簡単になります。その後、数行の jQuery だけが必要です。1 つは「Show Full Table」行を追加するためのもので、もう 1 つはその行のクリック リスナーを追加するためのものです。colspan属性の「X」値をテーブルの列数に変更してください。

 // jQuery chaining is useful here
 $(".Table_Middle").hide()
                   .eq(0)
                   .before('<tr colspan="X" class="showFull">Show Full Table<tr/>');

$(".showFull").click(function() {
    $(this).toggle();
    $(".Table_Middle").toggle();
});

これは適切に劣化し、多くのブラウザー/デバイスでアクセスできるため便利です。JavaScript がオフになっている場合、または CSS が無効になっている場合 (または、このコードがサポートされない可能性があるその他のシナリオ)、「テーブル全体を表示」行はありません。

于 2008-10-18T16:40:00.737 に答える
1

私はおそらく次のようにします：

<table>
    <thead>
        <tr>
            <th>Col1</th>
            <th>Col2</th>
            <th>Col3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>data1</td>
            <td>data1</td>
            <td>data1</td>
        </tr>
        ...
    </tbody>
    <tbody id="hidden-rows">
        <tr>
            <td colspan="3">
                <a href="#" onclick="$('#hidden-rows').hide();$('#extra-rows').show();">
                    Show hidden rows
                </a>
            </td>
        </tr>
    </tbody>
    <tbody id="extra-rows" style="display: none;">
        <tr>
            <td>data1</td>
            <td>data1</td>
            <td>data1</td>
        </tr>
        ...
    </tbody>
    <tbody>
        <tr>
            <td>data1</td>
            <td>data1</td>
            <td>data1</td>
        </tr>
        ...
    </tbody>
</table>

うまく劣化しないため、これは優れた方法ではありません。

適切に劣化させるには、最初にすべての行を表示してから、jQuery ドキュメントの準備完了関数でそれらを非表示にし、リンクを含む行を作成する必要があります。

また、特定のクラスを非表示にする行を指定する方法も機能するはずです。jQuery は次のようになります。

$(document).ready(function() {
    $('tr.Table_Middle').hide();
});

ただし、それらを再表示するには、リンクを含む行を作成する必要があります。

于 2008-10-18T16:35:38.530 に答える