JavaScript でテーブル行を非表示にする
Anika Tabassum Era
2023年10月12日
-
JavaScript で jQuery の
toggle()関数を使用してテーブル行を非表示にする -
JavaScript で jQuery の
show()およびhide()関数を使用してテーブル行を非表示にする
JavaScript では、連携する機能を持つ共通のクラスの下に特定のテーブルデータを定義できます。この特定の関数は、そのテーブルの行が選択的トリガーでどのように動作するかを宣言します。
簡単に言うと、ボタンまたはリンクタグは、テーブル行の表示と非表示の詳細を示す関数をトリガーします。
ここでは、この例では、jQuery の toggle() 関数と、show() および hide() 関数に焦点を当てます。どちらの方法も、行の拡大と縮小を推測します。
コードフェンスに飛び乗ってみましょう。
JavaScript で jQuery の toggle() 関数を使用してテーブル行を非表示にする
この例では、テーブルの行を取得し、それらを display: "none"に設定します。また、特定の anchor タグをクリックすると、現在のステージが display: "block"に再定義されます。
このプロセスはその逆であるため、期待どおりの結果が得られます。次のコード行は、残りの部分を示しています。
コードスニペット：
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<table>
<tr>
<td>Oranges</td>
<td>100</td>
<td><a href="#" class="toggler" data-prod-cat="1">+</a></td>
</tr>
<tr class="cat1" style="display:none">
<td></td>
<td>120</td>
</tr>
<tr class="cat1" style="display:none">
<td></td>
<td>140</td>
</tr>
<tr>
<td>Apples</td>
<td>100</td>
<td><a href="#" class="toggler" data-prod-cat="2">+</a></td>
</tr>
<tr class="cat2" style="display:none">
<td></td>
<td>120</td>
</tr>
<tr class="cat2" style="display:none">
<td></td>
<td>140</td>
</tr>
</table>
$(document).ready(function() {
$('.toggler').click(function(e) {
e.preventDefault();
$('.cat' + $(this).attr('data-prod-cat')).toggle();
});
});
出力：
-Function-to-Hide-Table-Rows.webp)
JavaScript で jQuery の show() および hide() 関数を使用してテーブル行を非表示にする
クリック可能なものが 2つあります。1つはテーブルの行を表示するために実行し、もう 1つは行を縮小します。前の例では、1つのクリック可能で、行の表示と非表示のタスクを実行できました。
ただし、同じタスクを実行する別の方法があります。コードブロックを確認してみましょう。
コードスニペット：
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#hide").click(function(){
$(".cat1").hide();
});
$("#show").click(function(){
$(".cat1").show();
});
});
</script>
</head>
<body>
<table>
<tr>
<td>Oranges</td>
<td>100</td>
</tr>
<tr class="cat1" style="display:none">
<td></td>
<td>120</td>
</tr>
<tr class="cat1" style="display:none">
<td></td>
<td>140</td>
</tr>
</table>
<button id="hide">Hide</button>
<button id="show">Show</button>
</body>
</html>
出力：
-and-hide()-Function-to-Hide-Table-Rows.webp)
