深入了解tbody

一、tbody是什麼？

在HTML中，table元素通常會包含thead、tbody和tfoot三個元素。其中，tbody元素是用來表示一張表格的主體部分的，它通常包含多個tr元素，每個tr元素又包含多個td或th元素。也就是說，tbody是table的一個子元素。

實際上，當我們不顯示地指定tbody元素時，瀏覽器也會自動生成一個tbody元素，將其中的tr元素作為其子元素。因此，在實際開發中，我們不一定需要顯式地添加tbody元素。

二、為什麼要使用tbody？

雖然不顯式地添加tbody元素也能夠顯示正確的表格內容，但是，顯式地添加tbody元素會有以下好處：

1. 提高代碼可讀性

程序員添加tbody元素有助於代碼結構的清晰，讓代碼更易於理解和維護。

2. 提高效率

當tbody元素和thead或tfoot元素一起使用時，它們能夠幫助屏幕閱讀器更好地讀取表格內容，提高無障礙性；還能通過JS等前端腳本操作tbody中的內容，提高開發效率。

三、如何使用tbody？

使用tbody很簡單，只需要在table元素中添加tbody元素，並將需要顯示的內容放在其中即可。下面是一段示例代碼：

  <table>
    <thead>
      <tr><th>Header 1</th><th>Header 2</th></tr>
    </thead>
    <tbody>
      <tr><td>Row 1, Cell 1</td><td>Row 1, Cell 2</td></tr>
      <tr><td>Row 2, Cell 1</td><td>Row 2, Cell 2</td></tr>
      <tr><td>Row 3, Cell 1</td><td>Row 3, Cell 2</td></tr>
    </tbody>
  </table>

四、如何操作tbody中的內容？

一般情況下，我們通過JS等前端腳本來對tbody中的內容進行操作。操作tbody中的內容有以下幾種方式：

1. 增加一行

我們可以使用appendChild方法向tbody中添加一個新行。以下是一段示例代碼：

    const table = document.querySelector('table'); // 獲取table元素
    const tbody = table.querySelector('tbody'); // 獲取tbody元素
    const newRow = tbody.insertRow(); // 插入新行
    newRow.innerHTML = '<td>New Row, Cell 1</td><td>New Row, Cell 2</td>'; // 設置新行的內容
  

2. 刪除一行

我們可以使用deleteRow方法來刪除tbody中的一個行。以下是一段示例代碼：

    const table = document.querySelector('table'); // 獲取table元素
    const tbody = table.querySelector('tbody'); // 獲取tbody元素
    tbody.deleteRow(2); // 刪除第三行
  

3. 修改一行

我們可以先通過querySelector方法獲取需要修改的行，然後設置其innerHTML屬性即可修改該行。以下是一段示例代碼：

    const table = document.querySelector('table'); // 獲取table元素
    const tbody = table.querySelector('tbody'); // 獲取tbody元素
    const rowToModify = tbody.querySelector('tr:nth-child(2)'); // 獲取第二行
    rowToModify.innerHTML = '<td>Modified Row, Cell 1</td><td>Modified Row, Cell 2</td>'; // 修改內容