jquery表格怎麼隱藏子行

在網站開發中，表格往往是一種常見的展示資料的形式。然而，有時候我們需要在表格中嵌入子行來展示詳細資料。如果我們不希望一開始就將這些子行全部展開，那麼我們就需要實作一種能夠隱藏子行並在需要時顯示這些子行的方法。

幸運的是，jQuery提供了一個非常方便的方法來幫助我們實現這項功能，接下來我們將使用一些簡單的程式碼來實作一個能夠隱藏子行、顯示子行的jQuery表格。

需要用到的 HTML

在這個範例中，我們將使用一個簡單的表格用來展示一些資料。表格由兩個主要部分組成：表頭和表體。其中，表體部分包含了我們需要添加子行的數據，我們將在其中添加一些新的行來展示詳細數據。

<table>
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Email</th>
      <th>Phone</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>John Doe</td>
      <td>john@example.com</td>
      <td>555-1234</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Jane Doe</td>
      <td>jane@example.com</td>
      <td>555-5678</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Bob Smith</td>
      <td>bob@example.com</td>
      <td>555-9101</td>
    </tr>
  </tbody>
</table>

隱藏子行

首先，我們需要將新的行加入到表體中。這些行將作為子行，隱藏起來直到使用者點擊主行才會顯示出來。我們使用以下HTML程式碼來新增一個新的行，用來展示附加的詳細資料：

<tr class="expandable">
  <td colspan="4">
    <p>
      This is some additional data that will be hidden until the main row is clicked.
    </p>
  </td>
</tr>

可以看到，我們使用了一個類別名稱expandable來表示這個新的行是可伸縮的，同時我們將它的列數設為4，這樣子行的寬度將與主行相同。

然後，我們將這些新的行隱藏起來，這樣在頁面載入時使用者並不會看見它們。我們可以使用以下CSS程式碼來實現：

tr.expandable {
  display: none;
}

現在，網頁載入時我們已經成功的將子行隱藏起來了，接下來我們需要添加一些程式碼來實現點擊主行時顯示子行的功能。

顯示子行

在這個範例中，我們將透過點擊主行來展開子行。此時我們將使用jQuery，利用click()函數監聽使用者的點擊事件，這時就能夠實現主行所對應的子行的展開和收起操作。

$(document).ready(function() {
  $('table').on('click', 'tr', function() {
    var expandable = $(this).next('.expandable');
    expandable.toggle();
  });
});

我們使用$(document).ready()來確保頁面中的所有元素都已經被完全加載，然後對整個表格物件進行了click()事件的監聽。當使用者點擊表格的行時，我們會取得下一行的內容，也就是我們預先新增的那些可展開子行，並透過jQuery的toggle()函數將其展開或收起。

透過以上程式碼，我們就可以實現展開子行的功能了。

總結

本文中，我們展示如何利用jQuery來實作表格中的子行並進行展開和收起操作。透過新增動態HTML和CSS程式碼，我們成功的將子行隱藏起來並監聽使用者點擊主行時展示出來。這些簡單的步驟可以輕鬆的應用於任何網站表格的開發中，為您的網站帶來更優秀的使用者體驗。

以上是jquery表格怎麼隱藏子行的詳細內容。更多資訊請關注PHP中文網其他相關文章！