表格列数据映射到看板列需用JavaScript按列逻辑重组DOM：先通过thead匹配列名确定语义列，再动态计算colspan影响下的真实列偏移，遍历每行将任务归属对应状态列容器；拖拽时绑定唯一data-id并反向同步回原始表格，确保数据与交互一致。
表格列数据如何映射到看板列（column-based layout）
HTML表格本身是行优先结构，直接渲染成Trello式看板（每列代表一个状态，如“待办”“进行中”“已完成”）会丢失语义且难以交互。必须把<tr>按列逻辑重组，不能靠CSS Grid或Flex强行“转置”——那样只是视觉翻转，DOM顺序和可访问性全乱了。
核心做法：用JavaScript提取每列的单元格内容，按列构建独立容器（如<div class="column">），再把对应行数据塞进去。关键不是样式，而是数据归属关系。
- 假设原始表格中第1列为任务标题，第2–4列分别对应“待办”“进行中”“已完成”三种状态（值为
"X"或空） - 遍历
table.querySelectorAll("tbody tr")，对每行检查各状态列是否非空，决定该行数据归属哪个列 - 不要用
table.rows[i].cells[j]硬编码列索引，先用thead th文本匹配列名，提高可维护性
如何避免跨列合并单元格（colspan）导致的数据错位
colspan会让某单元格横跨多列，破坏“一列一状态”的映射前提。一旦出现，脚本按列索引取值就会偏移，比如第3列实际物理位置可能是cells[5]，但逻辑上它仍是“已完成”列。
处理方式不是跳过或报错，而是动态计算每个<th>的真实列偏移：
立即学习“前端免费学习笔记（深入）”；
- 遍历
thead tr:first-child th，用cellIndex和colSpan累加出每列的起始位置映射表 - 对每一行，用
row.cells配合上述映射，定位“待办”列实际在哪个cellIndex - 若某行某列被
colspan覆盖而无对应<td>，视为该任务在此列不显示（不是空值，而是缺失）
拖拽排序时如何保持与原始表格数据同步
看板拖拽本质是改变DOM顺序，但原始<table>结构不动。如果后续要导出或提交，必须让拖拽后的顺序反向写回表格行顺序，否则数据就脱节了。
最可靠的做法是给每条任务记录绑定唯一data-id，而不是依赖索引：
- 初始化时从
<tr data-id="task-123">读取ID，挂载到对应看板卡片的data-task-id - 拖拽结束时，遍历每个列容器内的卡片顺序，收集
data-task-id列表 - 按此顺序重排原始
<tbody>中的<tr>，用appendChild而非innerHTML，避免事件监听器丢失
移动端触摸拖拽的兼容性陷阱
原生dragstart/dragover在iOS Safari和部分安卓浏览器中行为不一致，经常触发页面缩放或选中文本。不能只靠event.preventDefault()解决。
实操建议直接弃用原生拖拽API，改用轻量级库或手动实现：
- 监听
touchstart获取初始坐标，touchmove计算位移，touchend判定目标列 - 拖拽过程中用
transform: translateY()移动卡片，避免重排布局影响性能 - 目标列高亮要用
outline或box-shadow，别依赖:hover——移动端没hover
列式转换真正的复杂点不在布局，而在数据归属判断和拖拽后状态回写。列名匹配、colspan处理、ID绑定这三步漏掉任何一环，后续交互就不可靠。
