在 JavaScript 中隱藏表格行

Anika Tabassum Era 2023年1月30日 2022年5月31日
  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 GitHub Facebook

相關文章 - JavaScript Table