正确做法是委托点击事件到表格，判断目标是否为非复选框区域再同步勾选；删除前须用querySelectorAll校验真实选中项；批量删除应从底向上remove行元素；失败时需还原DOM或添加临时禁用样式。
点击行时自动勾选复选框，而不是直接操作 tr
浏览器原生不支持 tr 的 checked 属性，强行给 tr 绑定 click 并手动切换样式或状态，容易和复选框的默认行为冲突（比如点到复选框边缘触发两次）。正确做法是：所有点击事件委托到表格，判断点击目标是否为 td 或 tr，但只对非 input[type="checkbox"] 的区域触发「同步勾选对应复选框」逻辑。
实操建议：
立即学习“前端免费学习笔记（深入）”；
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 给每行的
<input type="checkbox" name="row-select" value="123">设置唯一value（如数据库 ID），不要用索引 - 监听
table的click事件，用e.target.closest('tr')找到行，再查该行内input[type="checkbox"] - 若点击位置不是复选框本身（
e.target.type !== 'checkbox'），则checkbox.checked = !checkbox.checked - 避免在
tr上设onclick，否则移动端可能误触、iOS Safari 有 300ms 延迟问题
删除前必须校验用户是否真有选中项
用户习惯性点「删除」按钮，但可能根本没勾选——此时若直接发请求或清空 DOM，会引发困惑甚至数据误删。不能依赖 UI 层面的视觉反馈（比如高亮行）来判断选中状态。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
document.querySelectorAll('input[name="row-select"]:checked')获取真实选中的节点列表 - 检查
.length === 0，是则alert('请至少选择一项')或显示 inline 提示，不执行后续逻辑 - 不要用
tr.classList.contains('selected')这类靠 CSS 类名判断的方式，它和复选框状态可能不同步 - 如果使用框架（如 Vue/React），确保删除动作触发前，响应式数据已同步 checkbox 的
checked状态
批量删除后如何安全更新 DOM 而不破坏事件绑定
直接用 innerHTML = '' 或 remove() 整个表格再重绘，会导致所有事件监听器丢失，也影响性能。尤其当行内有编辑按钮、下拉菜单等交互元素时，重建 DOM 后这些功能就失效了。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 收集所有被选中行的
tr元素引用（不是 ID 字符串），用Array.from(checkedInputs).map(cb => cb.closest('tr')) - 按从底向上顺序逐个调用
tr.remove()（避免索引错位） - 若需保留分页或总数统计，记得同步更新
data-total或全局计数变量 - 不要用
tr.parentNode.removeChild(tr)这种老写法，remove()更简洁且兼容现代浏览器
后端返回错误时，前端要还原已删除的视觉状态
网络失败、权限不足、并发冲突等都可能导致删除接口返回非 200 响应。此时用户看到行消失了，但实际没删成，会造成严重误导。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 发起删除请求前，先克隆被选中行的 outerHTML 或保存其 DOM 引用（注意深拷贝问题）
- 请求失败后，用
insertBefore或append把备份的行插回原位置（需记录原始序号） - 更稳妥的做法：删除操作全程不立即移除 DOM，而是加
disabled和opacity: 0.5样式，等接口成功后再真正 remove - 若用 Fetch，记得检查
response.ok而不只是response.status === 200，因为 4xx/5xx 不会进catch
