最稳方式是用insertbefore()或before()将tr插入参考行前；必须用tbody.children而非childnodes以避开文本节点，且需确保目标tr仍在原tbody中，否则静默失败。
直接用 insertBefore() 移动 tr 最可靠
浏览器不会自动维护表格行的“逻辑顺序”，DOM 顺序即显示顺序。想让某行出现在特定位置，最稳的方式是调用 insertBefore() 或 before() 方法，把目标 tr 插入到参考行之前。
常见错误是误用 childNodes：它包含文本节点（换行、空格），导致下标错位。必须用 tbody.children 或 Array.from(tbody.querySelectorAll('tr')) 获取纯元素列表。
- 只操作
tbody下的tr，避开thead和tfoot，否则可能把表头拖进数据区 - 若目标行已不在原
tbody中（比如被移走过），insertBefore()会静默失败，需先确认父节点 -
tr.before(anotherTr)在 IE11 不支持，降级写法是tr.parentNode.insertBefore(anotherTr, tr)
用 dataset 记录原始索引，避免 DOM 变化后找不着行
当表格支持排序、过滤或分页时，DOM 行顺序和数据数组索引会脱节。靠 Array.from(tbody.children).indexOf(tr) 查位置不可靠——因为行可能已被重排或隐藏。
更安全的做法是在初始化时就为每行打标：tr.dataset.rowIndex = i（i 来自原始数据循环下标）。后续任何操作都基于这个稳定 ID 查找、交换或定位。
- 不要依赖
tr.rowIndex：它是只读属性，且在有thead时返回的是整个表格中的位置，不是tbody内偏移 - 如果用了 Vue/React，
dataset仅作辅助，核心顺序必须由数据层驱动，DOM 操作只是副作用 - 服务端分页场景下，
dataset.rowIndex应设为全局唯一 ID（如数据库主键），而非当前页下标
拖拽排序时，dragover 必须绑定在 tbody 上并 preventDefault()
只给 tr 绑 dragover 是无效的。真正决定“能否投放”的是容器（tbody 或 table）上的 dragover 事件；不调用 event.preventDefault()，drop 永远不会触发——浏览器会按默认行为打开链接或下载文件。
-
tr上的dragover只用于加样式反馈（比如加虚线边框），不是功能必需 - 鼠标悬停在两行之间时，
event.target往往是tbody，所以必须监听它的dragover - 每次
dragover触发都要动态计算鼠标 Y 坐标相对于目标tr的位置，才能判断是插上方还是下方
Vue/React 项目里别直接操作 tr 的 DOM 顺序
框架会根据响应式数据重新渲染，你手动移动 tr 后，下次数据更新或 re-render 会覆盖你的改动，甚至引发 DOM 错乱或 key 冲突。
正确做法是：拖拽结束时，只更新数据数组顺序（比如用 Array.splice() 调整项位置），让框架驱动视图。DOM 移动只是临时视觉反馈，不能替代状态同步。
- 如果用了虚拟滚动（如
vue-virtual-scroller），DOM 行根本不存在于文档中，insertBefore会报错或无效果 - 固定表头（
position: sticky）表格中，thead和tbody是分离容器，跨容器移动tr会导致布局断裂 - 带编辑态的行（含
input、select）若用 innerHTML 重写tbody，用户输入会丢失；必须用框架机制保活
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
