在 JavaScript 中隱藏表格行
Anika Tabassum Era
2023年10月12日
在 JavaScript 中，我們可以在一個通用的 類 下定義某些表資料，該類將具有一些可配合的功能。此特定函式將宣告該表的行在選擇性觸發器上的行為方式。
簡單來說，一個按鈕或連結標籤將觸發一個功能，該功能將具有隱藏和顯示錶格行的詳細資訊。
在這裡，在我們的示例中，我們將關注 jQuery 的 toggle() 函式以及 show() 和 hide() 函式。這兩種方式都可以推斷為行擴充套件和收縮。
讓我們跳進程式碼。
使用 jQuery 的 toggle() 函式在 JavaScript 中隱藏表格行
該示例將採用表格行並將它們設定為 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)
使用 jQuery 的 show() 和 hide() 函式在 JavaScript 中隱藏表格行
我們將有兩個可點選的；一個將執行以呈現錶行，另一個將縮小行。前面的例子有一個可點選的來完成顯示和隱藏行的任務。
但是我們將有不同的方式來完成相同的任務。讓我們檢查一下程式碼塊。
程式碼片段：
<!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)
