HOWTO · JavaScript
在 JavaScript 中隐藏表格行
浏览器中的 JavaScript 可通过 DOM 和 CSS 更改元素的可见性。本文介绍两种 jQuery 方法：用 toggle() 切换选定表格行的显示状态，或用独立控件调用 hide() 和 show() 来隐藏和显示这些行。
本页内容
点击后隐藏或显示指定表格行时，可为相关行添加相同的 class，再用 jQuery 选中这些行。一个控件需要在两种状态间切换时使用 toggle()；需要分别控制显示和隐藏时使用 hide() 与 show()。以下示例都需要加载一次 jQuery。浏览器中的 JavaScript 也可以通过 DOM 和 CSS 更改元素的可见性；jQuery 则提供了便于选择和更新元素的方法。
使用 jQuery 的 toggle() 函数在 JavaScript 中隐藏表格行
为每组详细信息行添加类别 class，并将该类别写入对应控件的 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>
选择器根据被点击链接的类别生成，因此点击 oranges 控件时只会影响 .cat1。再次点击会隐藏这些行。每个详细信息行的 class 都必须与类别值完全一致；如果某行使用了不同的类名，选择器就找不到它。如果控件不需要导航，可以使用 <button type="button"> 代替锚点；此时不需要调用 preventDefault()。示例中这些行起初由 display:none 隐藏，因此第一次点击会显示它们，第二次点击则会再次隐藏。如果希望它们初始时可见，请移除这项初始样式，这样第一次点击就会隐藏它们。示例中显示的控件标签（例如 oranges）保留为英文。
使用 jQuery 的 show() 和 hide() 函数在 JavaScript 中隐藏表格行
如果需要明确执行某个操作，而不是每次点击都切换状态，可以使用两个独立控件。两个控件应针对带有相同 class 的行；将这些行设为 display:none，首次执行显示操作时就能将其显示出来。如果希望行初始时可见，请省略该样式，这样隐藏控件便可执行首次更改。表格包含多个分组时，控件也可以针对特定类别的 class，而不是 .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() 控件。
