在 JavaScript 中隱藏表格行

Anika Tabassum Era 2023年10月12日
  1. 使用 jQuery 的 toggle() 函式在 JavaScript 中隱藏表格行
  2. 使用 jQuery 的 show()hide() 函式在 JavaScript 中隱藏表格行
在 JavaScript 中隱藏表格行

在 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();
  });
});

輸出:

使用 jQuery toggle() 函式隱藏表格行

使用 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>

輸出:

使用 jQuery show() 和 hide() 函式隱藏表格行

Anika Tabassum Era avatar Anika Tabassum Era avatar

Era is an observer who loves cracking the ambiguos barriers. An AI enthusiast to help others with the drive and develop a stronger community.

LinkedIn Facebook

相關文章 - JavaScript Table