JavaScript 怎样隐藏 tr 元素

在网页开发中，有时我们需要根据特定的条件来隐藏表格中的行（tr 元素）。JavaScript 作为前端开发的重要语言，提供了多种方法来实现这一功能。

通过修改元素的 CSS 属性来隐藏元素是最常见的方式。在 JavaScript 中，可以使用 style 属性来操作。例如，获取到要隐藏的 tr 元素后，将其 display 属性设置为 none。代码如下：

// 获取 tr 元素
const myTr = document.getElementById('myTr');
// 隐藏 tr 元素
myTr.style.display = 'none';

这里通过 getElementById 方法获取到指定 id 的 tr 元素，然后直接修改其 style 属性下的 display 值，从而实现隐藏效果。若之后想重新显示该 tr 元素，只需将 display 属性值改回默认值（如 table-row）即可：

myTr.style.display = 'table-row';

除了直接操作 style 属性，还可以通过操作 CSS 类来实现隐藏和显示。首先在 CSS 文件中定义一个用于隐藏元素的类：

.hidden {
    display: none;
}

在 JavaScript 中，使用 classList 属性来添加或移除这个类。添加类以隐藏 tr 元素：

const myTr = document.getElementById('myTr');
myTr.classList.add('hidden');

移除类以显示 tr 元素：

myTr.classList.remove('hidden');

这种方式的好处在于，CSS 样式的管理更加集中，便于维护和修改。

另外，如果需要批量隐藏多个 tr 元素，可以使用 querySelectorAll 方法获取符合条件的所有 tr 元素，然后遍历这些元素并进行隐藏操作。例如，隐藏所有包含特定类名的 tr 元素：

const trs = document.querySelectorAll('tr.specificClass');
trs.forEach(tr => {
    tr.style.display = 'none';
});

JavaScript 为我们提供了丰富的手段来隐藏 tr 元素。开发者可以根据具体的需求和项目结构，选择最适合的方法来实现页面元素的动态显示与隐藏，提升用户体验和交互性。