DataTables 问题：VM9075 dataTables.min.js:24Uncaught TypeError: Cannot set property '_DT_CellIndex' of undefined

Question

我刚开始使用 DataTables，创建表时一切正常。

当我在表中显示 5、24、47 行时，DataTables 的行为符合我的预期。

但是我有这个大约有 700 行的表，我在谷歌浏览器中得到了错误，

 "VM9075 dataTables.min.js:24Uncaught TypeError: Cannot set property '_DT_CellIndex' of undefined "

在 IE 9 中，

 "SCRIPT5007: Unable to set value of the property '_DT_CellIndex': object is null or undefined
jquery-1.10.2.min.js, line 4 character 2367"

顺便说一句，我没有两次包含 jQuery。

我不确定如何从这里开始。

我尝试使用 .js 文件的未缩小版本自己对其进行更多调试，但我一直收到“ext”方法或属性未定义，也无法修复。

任何帮助表示赞赏！

原文由 Coty Embry 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我想到了

最大的问题是不知道这个错误到底意味着什么。在我的例子中，它意味着“每个 <td> 表中元素的数量是 <tr> 元素的数量 <th> 的子元素不匹配是 <thead> 元素的子元素。”

我的表是由服务器生成的，一些 <tr> 元素有 27 个 <td> 子元素（它们填满了表的整个宽度，但一些 <tr> 元素只有 3、4 或 5，… <td> 不是有效表的子元素。

我通过在表中为 <tr> <td> 元素来解决它，这些元素缺少正确数量的 <td> 元素

var makeTableValidObject = {
    thisWasCalled: 0,
    makeTableValid: function() {
        var tableToWorkOn = document.getElementById("table1");
        //check the number of columns in the <thead> tag
                                                   //thead     //tr        //th      elements
        var numberOfColumnsInHeadTag = tableToWorkOn.children[1].children[0].children.length;
        var numberOf_trElementsToValidate = tableToWorkOn.children[2].children.length;
        //now go through each <tr> in the <tbody> and see if they all match the length of the thead columns
                       //tbody     //all trs//all tds   elements
         //tableToWorkOn.children[2].children.children);
        for(var i = 0; i < numberOf_trElementsToValidate; i++) {
            //row my row make sure the columns have the correct number of elements
            var tdColumnArray =  tableToWorkOn.children[2].children[i].children
            var trElementToAppendToIfNeeded = tableToWorkOn.children[2].children[i];
            if(tdColumnArray.length != numberOfColumnsInHeadTag) {
                //since they don't match up, make them valid
                if(tdColumnArray.length < numberOfColumnsInHeadTag) {
                //add the necessary number of blank <td> tags to the <tr> element to make this <tr> valid
                    var tdColumnArrayLength = tdColumnArray.length;
                    for(var j = 0; j < (numberOfColumnsInHeadTag - tdColumnArrayLength); j++) {
                        var blank_tdElement = document.createElement("td");
                        blank_tdElement.id = "validating_tdId" + i + "_" + j;
                    trElementToAppendToIfNeeded.appendChild(blank_tdElement);
                    }
                }
                else {
                    //TODO: remove <td> tags to make this <tr> valid if necessary
                }
            }
        }
    }
};

编辑 1：

已经有一段时间了，这个问题仍然有很多观点。我已经更新了代码。

我用第二行替换了第一行代码以便更 通用

var numberOfColumnsInHeadTag = tableToWorkOn.children[1].children[0].children.length;

var numberOfColumnsInHeadTag = tableToWorkOn.querySelectorAll('thead')[0].querySelectorAll('th');

在前面的代码中，几乎所有你看到 children.children 的地方我都用 querySelectorAll(…) 函数替换了它。

它使用 css 选择器，这使得它非常强大。

祝好运

原文由 Coty Embry 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

遇到同样的问题并在基于 Coty 的 jquery 中（基本上）实现了同样的解决方案。希望这对某人有帮助。 :)

 $( '.table' ).each(function( i ) {

    var worktable = $(this);
    var num_head_columns = worktable.find('thead tr th').length;
    var rows_to_validate = worktable.find('tbody tr');

    rows_to_validate.each( function (i) {

        var row_columns = $(this).find('td').length;
        for (i = $(this).find('td').length; i < num_head_columns; i++) {
            $(this).append('<td class="hidden"></td>');
        }

    });

});

原文由 frostedpops 发布，翻译遵循 CC BY-SA 3.0 许可协议