如何使用 JavaScript 隱藏表格標題？

表格是 Web 開發中常見的元素，用於以結構化的格式組織和呈現資料。雖然表格標題提供了有價值的上下文並幫助使用者理解表格中的內容，但在某些情況下，隱藏表格標題變得必要。無論是為了增強視覺設計、改善使用者體驗還是滿足特定需求，瞭解如何使用 JavaScript 隱藏表格標題對於 Web 開發人員來說都是一項有用的技能。

在本文中，我們將探討使用 JavaScript 隱藏表格標題的不同方法。我們將介紹利用 CSS、操作文件物件模型 (DOM) 以及結合使用 CSS 類和 JavaScript 的技術。每種方法都將附帶程式碼示例和分步說明，使您能夠輕鬆地在專案中實現它們。

方法 1：使用 CSS display 屬性

隱藏表格標題最簡單的方法之一是操作 CSS display 屬性。透過將表格標題行的 display 屬性設定為“none”，我們可以有效地將其隱藏。此方法不涉及任何 JavaScript 操作，僅依賴於 CSS。

要實現此方法，請按照以下步驟操作：

在 HTML 標記中識別表格標題行。它通常由包含一個或多個 <th> 元素的 <thead> 元素表示。
向表格標題行新增 CSS 類或 ID，以便在 JavaScript 中更容易定位它。例如，您可以將類“header-row”分配給 <thead> 元素。
在 CSS 檔案或樣式塊中，為“header-row”類或 ID 定義規則，並將 display 屬性設定為“none”。這將隱藏表格標題。

示例

以下是一個演示此方法的程式碼片段：

<!DOCTYPE html>
<html>
<head>
   <style>
      .header-row {
         display: none;
      }
   </style>
</head>
<body>
   <table>
      <thead class="header-row">
         <tr>
            <th>Header 1</th>
            <th>Header 2</th>
            <th>Header 3</th>
         </tr>
      </thead>
      <tbody>
         <tr>
            <td>Data 1</td>
            <td>Data 2</td>
            <td>Data 3</td>
         </tr>
         <tr>
            <td>Data 4</td>
            <td>Data 5</td>
            <td>Data 6</td>
         </tr>
         <!-- Add more table rows as needed -->
      </tbody>
   </table>
</body>
</html>

在此程式中，CSS 樣式塊包含 .header-row 類的規則，該規則將 display 屬性設定為 none。這導致表格標題被隱藏。您可以將此程式碼複製並貼上到 HTML 檔案中，並在 Web 瀏覽器中開啟它以查看錶格標題被隱藏。

方法 2：使用 JavaScript 修改 DOM

除了 CSS 之外，我們還可以使用 JavaScript 透過操作文件物件模型 (DOM) 來隱藏表格標題。這種方法使我們能夠更靈活地控制頁面上的元素。

要使用 JavaScript 隱藏表格標題，我們可以使用 JavaScript 方法（例如 querySelector() 或 getElementById()）選擇標題元素，然後修改其 CSS 屬性。

示例

以下是一個程式碼片段：

<!DOCTYPE html>
<html>
<head>
   <style>
      .hidden {
         display: none;
      }
   </style>
</head>
<body>
   <table>
      <thead id="header">
         <tr>
            <th>Header 1</th>
            <th>Header 2</th>
            <th>Header 3</th>
         </tr>
      </thead>
      <tbody>
         <tr>
            <td>Data 1</td>
            <td>Data 2</td>
            <td>Data 3</td>
         </tr>
         <tr>
            <td>Data 4</td>
            <td>Data 5</td>
            <td>Data 6</td>
         </tr>
         <!-- Add more table rows as needed -->
      </tbody>
   </table>

   <script>
      const header = document.getElementById('header');
      header.classList.add('hidden');
   </script>
</body>
</html>

在此示例中，我們將 id 屬性分配給元素，以便我們可以使用 JavaScript 輕鬆選擇它。然後，我們使用 getElementById() 方法檢索標題元素並將其分配給 header 變數。

接下來，我們使用 classList.add() 方法向標題元素新增 CSS 類 hidden。hidden 類具有 CSS 規則 display: none，這將隱藏該元素。

透過執行此程式碼，頁面載入時表格標題將被隱藏。您可以修改表格內容、CSS 樣式或 JavaScript 程式碼以滿足您的特定需求。

方法 3：使用 JavaScript 操作 CSS 類

隱藏表格標題的另一種方法是使用 JavaScript 操作 CSS 類。此方法允許我們透過向元素新增或刪除特定類來切換標題的可見性。

示例

以下是實現此方法的方法：

<!DOCTYPE html>
<html>
<head>
   <style>
      .hidden {
         display: none;
      }
   </style>
</head>
<body>
   <table>
      <thead id="header">
         <tr>
            <th>Header 1</th>
            <th>Header 2</th>
            <th>Header 3</th>
         </tr>
      </thead>
      <tbody>
         <tr>
            <td>Data 1</td>
            <td>Data 2</td>
            <td>Data 3</td>
         </tr>
         <tr>
            <td>Data 4</td>
            <td>Data 5</td>
            <td>Data 6</td>
         </tr>
         <!-- Add more table rows as needed -->
      </tbody>
   </table>   
   <script>
      const header = document.getElementById('header');
   
      function toggleHeader() {
         header.classList.toggle('hidden');
      }
   
      // Example: Toggle the header visibility on button click
      const toggleButton = document.getElementById('toggleButton');
      toggleButton.addEventListener('click', toggleHeader);
   </script>
</body>
</html>

在此示例中，我們定義了一個 CSS 類 .hidden，它將 display 屬性設定為 none，有效地隱藏了該元素。

使用 JavaScript，我們使用 getElementById() 選擇標題元素並將其儲存在 header 變數中。然後，我們定義一個函式 toggleHeader()，該函式使用 classList.toggle() 切換標題元素上的 hidden 類。

為了演示功能，我們在 HTML 標記中添加了一個切換按鈕，其 id 為 toggleButton。我們使用 addEventListener() 將單擊事件偵聽器附加到切換按鈕，當單擊時，該偵聽器將呼叫 toggleHeader() 函式。

透過單擊切換按鈕，hidden 類將被新增到標題元素或從標題元素中移除，從而有效地隱藏或顯示錶格標題。

此方法允許動態控制標題的可見性，允許您根據使用者互動或 JavaScript 程式碼中的特定條件切換其可見性。

方法 4：使用 visibility 屬性

隱藏表格標題的另一種方法是使用 CSS visibility 屬性。與 display 屬性（完全從文件流中移除元素）不同，visibility 屬性隱藏元素，同時仍佔據其空間。

要使用 visibility 屬性隱藏表格標題，我們可以將 CSS 類應用於表格標題並更新其 visibility 值。

示例

以下是一個程式碼片段：

<!DOCTYPE html>
<html>
<head>
   <style>
      .hidden-header {
         visibility: hidden;
      }
   </style>
</head>
<body>
   <table>
      <thead>
         <tr class="hidden-header">
            <th>Header 1</th>
            <th>Header 2</th>
            <th>Header 3</th>
         </tr>
      </thead>
      <tbody>
         <tr>
            <td>Data 1</td>
            <td>Data 2</td>
            <td>Data 3</td>
         </tr>
         <tr>
            <td>Data 4</td>
            <td>Data 5</td>
            <td>Data 6</td>
         </tr>
         <!-- Add more table rows as needed -->
      </tbody>
   </table>
</body>
</html>

在此示例中，我們定義了一個 CSS 類 .hidden-header 並將其 visibility 屬性設定為 hidden。然後，我們將此類應用於包含表格標題的表格行 (<tr>)。結果，表格標題將被隱藏，但其空間仍將在佈局中保留。

方法 5：使用 JavaScript 設定內聯樣式

隱藏表格標題的第四種方法涉及使用 JavaScript 直接在標題元素上設定內聯樣式。這種方法使我們能夠動態地操作元素的 CSS 屬性。

示例

以下是如何實現此方法的示例：

<!DOCTYPE html>
<html>
<head>
   <style>
      /* No additional styles required */
  </style>
</head>
<body>
   <table>
      <thead id="header">
         <tr>
            <th>Header 1</th>
            <th>Header 2</th>
            <th>Header 3</th>
         </tr>
      </thead>
      <tbody>
         <tr>
            <td>Data 1</td>
            <td>Data 2</td>
            <td>Data 3</td>
         </tr>
         <tr>
            <td>Data 4</td>
            <td>Data 5</td>
            <td>Data 6</td>
         </tr>
         <!-- Add more table rows as needed -->
      </tbody>
   </table>
   <script>
      const header = document.getElementById('header');
   
      function hideHeader() {
         header.style.display = 'none';
      }
   
      function showHeader() {
         header.style.display = '';
      }
   
      // Example: Hide the header on button click
      const hideButton = document.getElementById('hideButton');
      hideButton.addEventListener('click', hideHeader);
   
      // Example: Show the header on button click
      const showButton = document.getElementById('showButton');
      showButton.addEventListener('click', showHeader);
   </script>
</body>
</html>

在此示例中，我們使用 getElementById() 選擇標題元素並將其儲存在 header 變數中。我們定義了兩個函式：hideHeader() 和 showHeader()。

hideHeader() 函式將標題元素的 display 屬性設定為“none”，有效地透過使其消失來隱藏它。相反，showHeader() 函式將其 display 屬性重置為其預設值，這會導致標題再次可見。

為了演示功能，我們添加了兩個按鈕，其 id 屬性分別為 hideButton 和 showButton。我們使用 addEventListener() 將單擊事件偵聽器附加到這些按鈕，當單擊時，這些偵聽器將分別呼叫 hideHeader() 和 showHeader() 函式。

透過單擊“隱藏”按鈕，將呼叫 hideHeader() 函式，並且標題將透過將其 display 屬性設定為“none”而被隱藏。同樣，單擊“顯示”按鈕將呼叫 showHeader() 函式，將 display 屬性重置為其預設值，並使標題再次可見。

方法比較

我們將根據易於實現、靈活性、效能等因素對其進行評估。

方法 1：使用 CSS 隱藏表格標題

易於實現− 此方法簡單易行，因為它只需要新增一條 CSS 規則來隱藏標題。
靈活性− 它提供的靈活性有限，因為它將樣式應用於所有表格標題。如果您需要有選擇地隱藏標題，則此方法可能不適用。
效能− 此方法效能良好，因為它依賴於瀏覽器的渲染功能。

方法 2：使用 JavaScript 修改 DOM

易於實現− 此方法涉及訪問 DOM 元素並使用 JavaScript 修改其屬性。它需要一些 DOM 操作技術的知識。
靈活性 − 它提供了更大的靈活性，因為您可以根據您的需求有選擇地隱藏特定表格標題。
效能 − 動態修改DOM可能會對效能造成影響，尤其是在大型表格中。但是，除非您有大量元素，否則影響通常很小。

方法 3：使用 CSS 類和 JavaScript 切換可見性

實現難易度 − 此方法涉及新增 CSS 類並使用 JavaScript 切換表格標題的可見性。它需要結合 CSS 和 JavaScript 知識。
靈活性 − 它提供了靈活性，因為您可以根據使用者互動或特定條件輕鬆切換表格標題的可見性。
效能 − 此方法的效能與方法 2 類似，因為它涉及 DOM 操作。但是，使用 CSS 類切換可見性通常效率更高。

方法 4：使用 visibility 屬性

實現難易度 − 此方法涉及使用 JavaScript 將表格標題的 CSS visibility 屬性設定為“hidden”。它需要 CSS 和 JavaScript 知識。
靈活性 − 它提供了靈活性，因為您可以透過定位其 visibility 屬性來選擇性地隱藏特定表格標題。
效能 − 更改 visibility 屬性的效能比修改 DOM 結構更好。但是，它仍然需要瀏覽器渲染隱藏的元素。

方法 5：使用 JavaScript 設定內聯樣式

實現難易度 − 此方法涉及使用 JavaScript 直接操作表格標題元素的內聯樣式。它需要 JavaScript 知識和特定元素的屬性。
靈活性 − 它提供了靈活性，因為您可以設定任何樣式屬性，包括 display、visibility 或 opacity，以隱藏表格標題。
效能 − 修改內聯樣式對效能的影響類似於修改 DOM。它可能比動態更改 visibility 屬性的效能略好。

結論

有多種方法可用於使用 JavaScript 隱藏表格標題，每種方法都有其自身的優勢和注意事項。透過仔細評估這些方法的實現難易度、靈活性以及效能影響，您可以做出明智的決定，選擇最符合您需求的方法。

Mrudgandha Kulkarni

更新時間： 2023年8月7日

3K+ 次檢視

開啟你的職業生涯

透過完成課程獲得認證

開始學習