### [表格行显示隐藏：直接改 display 翻车了](https://www.huociguo.com/article/1823)

**Published:** 2026-10-02T10:45:37

**Author:** 米了

**Excerpt:** 表格加个行筛选功能，听着不难。第一版直接给 tr 改 ，功能是跑起来了，后面越改越乱 📋。行内样式像狗皮膏药一…

表格加个行筛选功能，听着不难。第一版直接给 tr 改 `style.display`，功能是跑起来了，后面越改越乱 📋。行内样式像狗皮膏药一样贴得到处都是，class 控制全部失效，只好重写。

![白纸上的勾选清单](https://api.huociguo.com/wp-content/uploads/2026/10/pexels-photo-6837789.jpeg)

行显隐本质是状态管理，不该散落在行内样式里

## 翻车点：直接改 style

行内样式优先级最高。第一版图省事 `tr.style.display = 'none'`，之后想加「仅显示异常行」之类的批量功能，class 写了不生效，原因全是行内样式在挡路 ⚠️。

## 重写：状态交给 class

```
tr.hidden { display: none; }

row.classList.toggle('hidden', !match);
```

显隐只是一个类的增删，批量操作、组合筛选都顺了。恢复时不用记着之前是 `table-row` 还是别的值，把类摘掉就行 ✅。

## 筛选条件存 data 属性

```
<tr data-status="overdue" data-type="invoice">
```

条件挂在 `data-*` 上，JS 读属性做判断。别去比对单元格文本，文案一改筛选全废。

## 两个结构上的坑

-   分组行、汇总行常带 colspan，隐藏明细行时记得同步处理，不然剩下孤零零一行合计。
-   tr 不支持高度过渡，想要收起动画只能包一层 div 或者退而求其次用透明度。

结论：显隐是状态不是样式，状态收进 class 与 data 属性，行内 style 一行都别碰。

**Tags:** classList, data属性, display属性, 行过滤, 表格行显隐

**Categories:** HTML5

---