jQueryを使用してテーブルの中央を非表示にするにはどうすればよいですか？
https://stackoverflow.com/questions/215219
-
03-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian質問
非常に長い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の表示/非表示機能を使用してテーブルを最小化しますが、上部と下部の行の一部を表示したいと思います。中央の行は、<！> quot; Show Full Table <！> quot;のようなテキストに置き換える必要があります。クリックすると展開され、テーブル全体が最初から最後まで表示されます。
jQueryでこれを行う最良の方法は何ですか？
ところで、私はすでにクラス<！> quot; Table_Middle <！> quot;を追加しようとしました。一部の行に表示されますが、それが占有するスペースがまだ完全に隠されていないため、ユーザーに表を完全に拡張する方法を提供するテキストがありません。
[編集] 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>
[編集]リンクブログ投稿と動作例。
解決
このような何かが機能する可能性があります：
<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();
});
他のヒント
最も簡単な方法は、<tbody>を追加して行をグループ化し、それをnoneとtable-row-groupの間で切り替えます（例外をキャッチし、IEの場合はblockに設定します）。 jqueryに固有にすることについてはわかりませんが、それは<！> quot; normal <！> quotです。物事のやり方。
これは、余分なマークアップを必要とせず、うまく劣化するソリューションです。
<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>
とjQuery ...ここでいくつかのことをハードコーディングしました（テーブル識別子、表示する行数など。必要に応じてテーブルのclass属性に入れることができます）より再利用可能にする（例：<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()
;
})
)
;
}
slice（）メソッドを使用してみてください：
$("#table tr").slice(1, 4).hide();
中間の<tr />タグに<！> quot; Table_Middle <！> quot;を指定すると、クラスを使用すると、はるかに簡単になります。その後、数行のjQueryのみが必要です。 <！> quot; Show Full Table <！> quot;を追加するもの。行、およびその行のクリックリスナーを追加する別の行。必ずcolspan属性の<！> quot; X <！> quot;を変更してください。テーブル内の列数の値。
// 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が無効になっている場合（またはこのコードがサポートされない可能性がある他のシナリオ）、<！> quot; show full table <！> quot;はありません。行。
おそらく次のようにします：
<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();
});
ただし、それらを再表示するには、リンクを含む行を作成する必要があります。
