JS实现隐藏tr

隐藏表格行（tr）的方法

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

方法1：修改style.display属性

// 通过ID获取行并隐藏
document.getElementById("rowId").style.display = "none";

// 通过类名隐藏所有匹配行
let rows = document.getElementsByClassName("rowClass");
for(let row of rows) {
    row.style.display = "none";
}

方法2：修改style.visibility属性

// 隐藏但保留空间
document.querySelector("tr").style.visibility = "hidden";

方法3：使用classList添加CSS类

/* 先定义隐藏样式 */
.hidden-row {
    display: none;
}

// 添加隐藏类
document.querySelector("tr").classList.add("hidden-row");

动态切换显示/隐藏

function toggleRow(rowId) {
    let row = document.getElementById(rowId);
    row.style.display = row.style.display === "none" ? "" : "none";
}

注意事项

• display: none会完全移除元素不占空间
• visibility: hidden会隐藏元素但保留空间
• 使用CSS类的方式更易于维护和批量操作
• 对动态生成的表格，建议使用事件委托监听

以上方法适用于现代浏览器，如需支持旧版IE可能需要额外兼容处理。