应使用 border 高亮验证失败的单元格，因其在 collapse 模式下层级独立、不受父级背景干扰；background 易受 table/tr 背景影响而失效。
表格单元格验证失败时，该用 border 还是 background 高亮？
直接改 border 更可靠。表格里单元格默认 border-collapse: collapse，用 background 会受父级 table 或 tr 背景干扰，尤其在 hover 或隔行变色场景下容易失效；而 border 是单元格自身属性，层级独立、响应明确。
实操建议：
- 对验证失败的
td或th添加类名invalid-cell，CSS 写.invalid-cell { border: 2px solid #f44336 !important; } - 避免只改
background-color，除非你同时清空所有祖先元素的背景（包括table、tbody、tr） - 若需兼容旧版 IE，别用
box-shadow模拟边框——它在 collapsed 表格中渲染错位
怎么让 JS 校验结果实时反映到对应表格单元格？
关键不是“找到单元格”，而是“绑定校验逻辑到数据源”。表格常由 JS 动态渲染（如 fetch 后 innerHTML 或 document.createElement），校验必须和数据更新同步，否则 DOM 节点一换，事件监听就断了。
常见错误现象：
- 给每个
td绑blur事件，但表格重绘后新td没监听器 - 校验函数里用
document.querySelectorAll('td')查找，却没过滤出当前行/列，导致高亮错位 - 校验通过后忘记移除
invalid-cell类，错误状态残留
推荐写法：
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 把校验逻辑封装成函数，接收行索引
rowIndex和列索引cellIndex作为参数，再从数据数组里取值校验 - 校验后调用
table.rows[rowIndex].cells[cellIndex].classList.toggle('invalid-cell', !isValid) - 如果表格支持编辑（如
contenteditable），监听input事件而非blur，避免用户还没输完就报错
服务端返回字段级错误，如何精准定位到表格里的单元格？
服务端错误结构（如 {"errors": [{"row": 2, "col": 1, "message": "金额不能为负"}]}）必须和前端表格坐标严格对齐。HTML 表格没有天然的“字段名”，靠 name 或 id 属性不可靠——它们通常不存在或不唯一。
实操要点：
- 服务端返回的
row和col必须是 0 起始的整数索引，且与table.rows[i].cells[j]的实际位置一致 - 前端渲染表格时，给每行加
data-row-id、每单元格加data-col-id，服务端错误里也用相同命名约定（避免用rowId和columnKey这类不一致字段） - 清理旧错误提示前，先执行
table.querySelectorAll('.invalid-cell').forEach(el => el.classList.remove('invalid-cell'))，否则新旧错误叠加
为什么表格里用 :invalid 伪类不起作用？
因为 :invalid 只适用于表单控件（input、select、textarea），不适用于 td 或 tr。表格单元格本身没有 validity API，无法触发这个伪类。
替代方案只有两个：
- 手动控制类名：校验后用 JS 切换
invalid-cell类 - 如果单元格内嵌了
input（比如可编辑表格），则对那个input用:invalid:user-invalid，再用input:focus + td::before等相邻选择器影响父容器——但要注意 Safari 对这类组合选择器支持不稳定
最易被忽略的一点：表格验证往往混入了数值范围、日期格式等复杂规则，这些无法靠 HTML5 原生 type 或 min/max 实现，必须全量走 JS 校验。别试图用 pattern 去套表格里的数字单元格——它只对字符串有效，且不触发 :invalid。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
