HOWTO · JavaScript
在 JavaScript 中隱藏表格行
瀏覽器中的 JavaScript 可透過 DOM 和 CSS 改變表格列的可見狀態；使用 jQuery 時，可用 `toggle()` 切換指定資料列的顯示狀態，或用 `hide()` 和 `show()` 搭配不同控制項分別隱藏與顯示資料列。
本頁內容
若要在點擊後隱藏或顯示指定的表格列，可以先為這些列加上相同的 class，再用 jQuery 選取它們。若要讓同一個控制項在兩種狀態間切換，可使用 toggle()；若要分別控制顯示與隱藏，則可使用 hide() 和 show()。以下範例都需要先載入 jQuery。瀏覽器中的 JavaScript 也能透過 DOM 和 CSS 改變元素的可見狀態；jQuery 則提供方便的方法來選取及更新元素。
使用 jQuery 的 toggle() 函式在 JavaScript 中隱藏表格列
為每組詳細資料列加上類別，並將該類別填入對應控制項的 data-prod-cat 屬性。如此一來，每個觸發項目只會對應到自己的資料列。範例中的資料列一開始以 style="display:none" 隱藏，讓 jQuery 的顯示方法能將它們顯示出來；請避免另外套用會強制資料列維持隱藏的 CSS 規則。點擊處理函式會阻止連結導向 #。
如範例所示，請在使用 $ 的程式碼之前載入 jQuery。ready 回呼會等到文件標記可用後才綁定處理函式，但無法補救 jQuery 未載入或載入失敗的情況。若要加入更多類別，請讓類別名稱與資料值保持一致：值為 3 時會選取 .cat3，因此不符合的資料列類別不會受影響。若控制項使用按鈕，請保留 type="button"，以免它送出外層表單。
執行此範例：
const rows = [
{ category: 1, visible: false },
{ category: 1, visible: false },
{ category: 2, visible: false }
];
function toggleCategory(category) {
for (const row of rows) {
if (row.category === category) row.visible = !row.visible;
}
}
toggleCategory(1);
console.log(rows.map(row => row.visible ? "shown" : "hidden").join(", "));
shown, shown, hidden
這段簡短的 JavaScript 示意程式展示類別比對邏輯。在瀏覽器中，jQuery 會以相同概念操作表格列：
<table>
<tbody>
<tr>
<th scope="row">Oranges</th><td>100</td>
<td><a href="#" class="toggler" data-prod-cat="1">Toggle oranges</a></td>
</tr>
<tr class="cat1" style="display:none"><td></td><td>120</td><td></td></tr>
<tr class="cat1" style="display:none"><td></td><td>140</td><td></td></tr>
<tr>
<th scope="row">Apples</th><td>100</td>
<td><a href="#" class="toggler" data-prod-cat="2">Toggle apples</a></td>
</tr>
<tr class="cat2" style="display:none"><td></td><td>120</td><td></td></tr>
<tr class="cat2" style="display:none"><td></td><td>140</td><td></td></tr>
</tbody>
</table>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(function () {
$(".toggler").on("click", function (event) {
event.preventDefault();
const category = $(this).attr("data-prod-cat");
$(".cat" + category).toggle();
});
});
</script>
選取器會根據所點擊連結的類別組成，因此點擊橘子控制項只會影響 .cat1。範例中該控制項的可見標籤是英文 “Toggle oranges”；第二個範例的 “Hide rows” 和 “Show rows” 標籤也都是英文，並未翻譯。再次點擊橘子控制項會隱藏這些資料列。每個詳細資料列的類別都必須與類別值完全相符；若資料列使用不同類別，選取器就找不到它。若控制項沒有導覽用途，可改用 <button type="button">，而不使用連結；如此便不需要 preventDefault()。由於這些資料列一開始設為 display:none，第一次點擊會顯示它們，下一次點擊則會將它們隱藏。若希望資料列一開始就顯示，請移除該初始樣式，第一次點擊便會將它們隱藏。
使用 jQuery 的 show() 和 hide() 函式在 JavaScript 中隱藏表格列
若希望動作明確，而不是每次點擊都切換狀態，請使用不同的控制項。兩個控制項要指定相同的資料列類別，並將資料列初始設為 display:none，這樣第一次執行顯示動作時就能顯示資料列。若希望資料列一開始就可見，請省略該樣式；隱藏控制項便會進行第一次狀態變更。若表格包含多組資料，也可以讓控制項指定特定類別，而不是 .detail-row。
<table>
<tbody>
<tr><th scope="row">Oranges</th><td>100</td></tr>
<tr class="detail-row" style="display:none"><td>Extra quantity</td><td>120</td></tr>
<tr class="detail-row" style="display:none"><td>Reserve quantity</td><td>140</td></tr>
</tbody>
</table>
<button id="hide-rows" type="button">Hide rows</button>
<button id="show-rows" type="button">Show rows</button>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(function () {
$("#hide-rows").on("click", function () {
$(".detail-row").hide();
});
$("#show-rows").on("click", function () {
$(".detail-row").show();
});
});
</script>
hide() 會將選取資料列的 display 設為 none；show() 則會還原合適的顯示狀態，讓表格列依表格版面配置呈現。一般不應將資料列設為 display: block 來顯示，因為這無法保留資料列原本的表格版面。這些資料列一開始是隱藏的，因此顯示控制項會將它們顯示出來，重複點擊也不會造成問題；隱藏控制項則會明確地將它們隱藏。相較之下，toggle() 每次點擊都會反轉目前狀態，適合用於單一控制項交替切換的情況。若使用者需要明確的操作指令，例如在資料列已隱藏後仍能隨時將一組資料列顯示出來，請使用分開的 show() 和 hide() 控制項。
