jQuery DataTables 实现嵌套子行时报m[n].style未定义TypeError

报错本质说明 #

• 本地触发的TypeError: undefined is not an object (evaluating 'm[n].style')和数据来源（Ajax拉取/本地JSON）没有关联，核心是DataTables内部DOM计算时拿到了不存在的节点引用，才会尝试访问undefined值的.style属性
• 在线Demo报错和本地不一致，只是因为测试环境的库版本、资源加载顺序不同，不是数据加载方式导致的差异

核心踩坑点对应修正方法 #

• 事件绑定不符合DataTables规范：不要直接给表格行绑定原生点击事件，要采用事件委托模式，把事件监听挂在表格的外层容器上，匹配带展开标识类的单元格作为触发点。避免表格重绘后事件失效、DOM节点移位导致的引用丢失
• 子行操作没有使用官方API：不要直接通过原生DOM操作把子内容插入到行节点后面，必须通过DataTables提供的row.child()接口挂载子行内容。直接操作原生DOM很容易在表格做列宽计算、视图重绘时把节点移出文档流，导致后续DOM遍历索引越界
• 库版本前后不兼容：本地页面如果同时引入不同版本的DataTables核心库、配套插件，就会出现内部API逻辑不匹配的问题，内部遍历节点时索引越界拿到undefined，直接触发这个style访问报错
• 嵌套子表格初始化时机错误：不要在主表格初始化阶段就给所有未渲染的子表格做实例化操作，要等子行实际展开、对应DOM节点挂载到页面之后，再初始化子明细表格。提前操作不存在的节点必然触发DOM访问错误

修正后的逻辑校验标准 #

• 主表格列配置里，给可点击的展开单元格加上固定标识类，作为点击触发的选择器匹配项
• 点击触发回调里，先通过当前DOM元素拿到对应的DataTables行实例，判断当前行子行的展开状态，再调用官方API实现展开/收起切换
• 子行挂载完成后，再把明细数据渲染到子表格里，完成嵌套表格的初始化

内容的提问来源于stack exchange，提问作者AlexW