JS实现隐藏tr

隐藏表格行（tr）的几种方法

在JavaScript中隐藏表格行（tr）可以通过多种方式实现，以下是几种常见的方法：

使用style.display属性

通过设置display: none可以隐藏表格行，同时不占用布局空间：

document.getElementById("rowId").style.display = "none";

使用style.visibility属性

设置visibility: hidden会隐藏元素但保留其占位空间：

document.querySelector("tr").style.visibility = "hidden";

通过classList添加CSS类

定义一个隐藏样式类，通过JavaScript动态添加：

.hidden-row {
    display: none;
}

document.querySelector("tr").classList.add("hidden-row");

使用jQuery方法

如果项目中使用了jQuery库，可以更简洁地实现：

$("#rowId").hide();
// 或者
$("tr").addClass("hidden-row");

隐藏多行匹配条件

通过循环隐藏符合特定条件的多行：

document.querySelectorAll("tr").forEach(row => {
    if (row.cells[0].textContent === "HideMe") {
        row.style.display = "none";
    }
});

注意事项

• 使用display: none会完全移除元素布局，可能导致表格重新渲染
• visibility: hidden适合需要保持布局稳定的场景
• 通过class控制样式更易于维护和复用
• 批量操作时注意性能影响，建议使用事件委托或文档片段优化