jQuery可编辑DataTable列数≥5时出现Cannot read property 'mData' of undefined错误

这个问题我之前在做DataTable自定义编辑功能时也踩过坑，跟行数完全没关系，核心原因是DataTable的初始化配置和表格实际列数不匹配，哪怕你HTML里的<th>和<td>数量一致，只要配置没跟上就会触发这个错误。下面给你几个排查和解决的方向：

1. 检查columns配置的数量是否和列数一致 #

DataTable初始化时，如果手动声明了columns数组，数组的长度必须和表格的列数（<th>的数量）完全对应。比如你4列时写了4个配置项，加第5列后没补充对应的配置，就会导致DataTable找不到第5列的mData定义，直接报错。

错误示例（5列但只有4个columns配置）：

$('#datatable-editable').DataTable({
  columns: [
    { data: 'engine' },
    { data: 'browser' },
    { data: 'platform' },
    { data: 'version' }
    // 缺少第5列的配置项
  ],
  // 其他编辑相关配置...
});

正确示例（5列对应5个columns配置）：

$('#datatable-editable').DataTable({
  columns: [
    { data: 'engine' },
    { data: 'browser' },
    { data: 'platform' },
    { data: 'version' },
    { data: 'grade' } // 新增第5列的配置，哪怕data值对应你的字段或者设为null
  ],
  // 其他编辑相关配置...
});

如果你的表格是纯前端静态数据，不需要绑定后端字段，也可以给每列的data设为null，让DataTable自动处理：

columns: [
  { data: null },
  { data: null },
  { data: null },
  { data: null },
  { data: null }
]

2. 避免依赖自动列推断，显式声明列配置 #

有时候你可能没写columns数组，指望DataTable自动推断列，但当列数超过4时，自动推断可能因为编辑插件的干扰（比如Editable需要明确列的编辑规则）而失败。这种情况下，显式声明所有列的配置会更稳妥，包括编辑相关的设置：

$('#datatable-editable').DataTable({
  columns: [
    { data: 'engine', editable: false }, // 不可编辑列
    { data: 'browser', editable: true },
    { data: 'platform', editable: true },
    { data: 'version', editable: true },
    { data: 'grade', editable: true } // 新增的可编辑列
  ],
  // 其他Editable插件配置...
});

3. 检查HTML结构是否存在隐性错误 #

虽然你说<th>和<td>数量匹配，但可能存在一些容易忽略的HTML结构问题：

• 有没有多余的<thead>或<tbody>标签？
• 某个<th>或<td>标签没正确闭合？
• 有没有在<tr>里嵌套了额外的<div>或其他元素导致列数解析异常？

可以用浏览器的开发者工具（F12）检查Elements面板里的表格结构，确保每一行的<td>数量和<thead>里的<th>数量完全一致，没有嵌套错误。

4. 检查编辑插件的列配置 #

如果你用的是第三方可编辑插件（比如DataTables Editor），还要确保插件的编辑字段配置也和列数对应。比如Editor的fields数组也要包含新增列对应的字段定义：

var editor = new $.fn.dataTable.Editor({
  table: '#datatable-editable',
  fields: [
    { label: 'Rendering engine', name: 'engine' },
    { label: 'Browser', name: 'browser' },
    { label: 'Platform', name: 'platform' },
    { label: 'Version', name: 'version' },
    { label: 'Grade', name: 'grade' } // 新增编辑字段
  ]
});

完整的5列可编辑DataTable示例 #

给你一个能正常运行的完整代码参考：

<table class="table table-striped" id="datatable-editable">
  <thead>
    <tr>
      <th>Rendering engine</th>
      <th>Browser</th>
      <th>Platform(s)</th>
      <th>Engine version</th>
      <th>CSS grade</th> <!-- 新增第5列 -->
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Gecko</td>
      <td>Firefox 1.0</td>
      <td>Win 98+ / OSX.2+</td>
      <td>1.7</td>
      <td>A</td> <!-- 对应第5列的td -->
    </tr>
    <tr>
      <td>Gecko</td>
      <td>Firefox 1.5</td>
      <td>Win 98+ / OSX.2+</td>
      <td>1.8</td>
      <td>A</td>
    </tr>
  </tbody>
</table>

<script>
$(document).ready(function() {
  $('#datatable-editable').DataTable({
    columns: [
      { data: null },
      { data: null },
      { data: null },
      { data: null },
      { data: null }
    ],
    // 假设你用的是inline编辑，添加编辑事件
    initComplete: function() {
      this.api().cells().every(function() {
        var cell = this;
        $('td', this.node()).on('click', function() {
          var currentValue = cell.data();
          var input = $('<input type="text" value="' + currentValue + '"/>');
          $(this).html(input);
          input.focus().blur(function() {
            cell.data($(this).val()).draw();
          });
        });
      });
    }
  });
});
</script>

按照上面的方法排查，应该就能解决这个错误了～

内容的提问来源于stack exchange，提问作者Murat Güzel