数据表问题:VM9075 dataTables.min.js:24Uncaught TypeError:无法设置未定义的属性“_DT_CellIndex" [英] DataTables issue: VM9075 dataTables.min.js:24Uncaught TypeError: Cannot set property '_DT_CellIndex' of undefined

问题描述

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

I just started using DataTables and everything works fine when creating the table.

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

When I display 5, 24, 47 rows in my table, DataTables behaves as I would expect.

但是我有一张大约有 700 行的表格，我在谷歌浏览器中遇到了错误，

But I have this table that has around 700 rows and I get the error in Google Chrome,

"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.

I don't have jQuery included twice btw.

我不知道如何从这里开始.

I'm not sure how to proceed from here.

我尝试使用 .js 文件的未缩小版本来自己调试它，但我一直收到ext"方法或属性未定义，也无法修复.

I tried to use the unminified version of the .js file to debug it more myself but i kept getting an "ext" method or property is undefined and couldn't fix that either.

感谢任何帮助！

推荐答案

我想通了

最大的问题是不知道这个错误究竟意味着什么.就我而言，这意味着表中作为 元素的子元素的每个 <td> 元素的数量与 元素是 元素的子元素."

The biggest issue was not knowing exactly what this error actually meant. In my case it meant "the number of every <td> element in your table that is a child of a <tr> element doesn't match the number of <th> elements that are a child of the <thead> element."

我的表是由服务器生成的，其中一些 元素有 27 个 子元素(填充了整个宽度表向上，但某些 元素只有 3、4 或 5 个，... 子元素不是有效的表.

My table was being generated by the server, and some of the <tr> elements had 27 <td> children (which was filling the whole width of the table up, but some of the <tr> elements only had 3, 4, or 5, ... <td> child elements which isn't a valid table.

我通过在我的表中为缺少正确数量的 的 元素添加空的 元素解决了这个问题; 元素

I solved it by adding empty <td> elements in my table for the <tr> elements that lacked the correct number of <td> elements

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:

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

It has been awhile and this question is still getting a bunch of views. I have since updated the code.

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

I replaced the first line of code with the second line to be more general

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

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

在之前的代码中几乎可以看到 children.children 我用 querySelectorAll(...) 函数替换了它.

Pretty much where ever in the prior code you see the children.children I replaced that with the querySelectorAll(...) Function.

它使用了 css 选择器，这使它非常强大.

It uses css selectors which makes it amazingly powerful.

祝你幸福

这篇关于数据表问题:VM9075 dataTables.min.js:24Uncaught TypeError:无法设置未定义的属性“_DT_CellIndex"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！