javascript - 追加のテーブル行の表示を切り替えます

Question

デフォルトで最初の行のみを表示したいテーブルがありますが、ユーザーが「もっと見る」リンクをクリックすると追加のX行を表示します（逆に、ユーザーが「表示を減らす」をクリックするとX行を非表示にします） ）。

例として、ページがロードされたときのデフォルトのビューを次のようにします。

 Top Scores
====================================
|   1 | show this row always!      |
====================================
 -show more-

次に、ユーザーが [さらに表示] をクリックすると、テーブルが展開されて行が追加され、次のようになります。

 Top Scores
====================================
|   1 | show this row always!      |
|   2 | newly displayed row        |
|   3 | newly displayed row        |
|   4 | newly displayed row        |
|   5 | newly displayed row        |
====================================
 -show less-

次に、明らかにユーザーが「表示を減らす」をクリックすると、テーブルはデフォルトに戻ります (最初の行のみを再度表示します)。

私は.toggle()jQuery の関数に精通していますが、ここで適用できるかどうか、またはさらに手作業を行う必要があるかどうかはわかりません。

ありがとう！

Answer 1

追加のクラスやヘッダーは不要 - http://jsfiddle.net/wgSZs/

$('table').find('tr:gt(0)').hide();

$("button").on("click", function() {
    $('table').find('tr:gt(0)').toggle();
});

アップデート

JS のダウンロードおよび適用中に要素が移動しないように、jQuery ではなく CSS を介して追加の行を非表示にすることをお勧めします。ただし、クラスを追加する必要はありません。マークアップをできるだけきれいに保つことをお勧めします。あなたはこれを行うことができます：

table tr { display: none }
table tr:first-child { display: block }

これが実際の例です - http://jsfiddle.net/wgSZs/1/

Answer 2

追加された行を のようなクラスでマークすると.collapsible、javascript で簡単に可視性を切り替えることができます。

$('.collapsible').show()または$('.collapsible').hide()または$('.collapsible').toggle()

Answer 3

http://jsfiddle.net/iambriansreed/uwfk8/

var initial_rows_to_show = 2;

(function(_rows){    
    _rows.hide();
    $('a.more').toggle(function(){
        _rows.show(); $(this).text('less');
    },function(){    
        _rows.hide(); $(this).text('more');
    });
})($('tr:gt(' + (initial_rows_to_show - 1) + ')'));

Answer 4

これは、テーブルを非表示にして表示のみにすることで実行できます

$('thead').click(function(){

  $('tbody').show();
})

Answer 5

OK、質問全体を入力した後、StackOverflow は関連する関連する質問を表示することにしました。:)

jQueryを介してセレクターを使用してgt、指定した行番号より大きい行のみを切り替えることができるようです。これは、私が達成したいことに最適です。

冗長な質問で申し訳ありません（これがうまくいくと仮定して、まだ試していません）！

Answer 6

どうぞ... jsFiddle での作業例:

http://jsfiddle.net/ndFgF/8/

<table width="500" border="1" cellspacing="0" cellpadding="0">
  <tr>
    <th width="25%" id="expand" scope="col">Show More</th>
    <th width="25%" scope="col">&nbsp;</th>
    <th width="25%" scope="col">&nbsp;</th>
    <th width="25%" id="collapse" scope="col">Show Less</th>
  </tr>
  <tr data-rows="togglerow" style="display:none">
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr data-rows="togglerow" style="display:none">
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr data-rows="togglerow" style="display:none">
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr data-rows="togglerow" style="display:none">
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>

テーブル行のデータ属性は、以下の jQuery で参照されることに注意してください。

<script>
$("#collapse").click(function() {
      $("[data-rows='togglerow']").hide(400);
    })
$("#expand").click(function() {
      $("[data-rows='togglerow']").show(400);
    })
</script>

私はクラス名の代わりに 'data' 属性を使用しました。それらを別々に保持したいからです...必要に応じてクラス名を使用できますが、適切な方法ではないため ID を使用しないでください (ID繰り返されるのではなく、一意である必要があります)。

Answer 7

トグルは完全に機能します：

$('#show-link').toggle(関数(){

} 、 関数（）{

});