表格行显示隐藏：直接改 display 翻车了

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

翻车点：直接改 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 一行都别碰。