DataTables问题：VM9075 dataTables.min.js：24Uncught TypeError：无法设置未定义的属性“_DT_CellIndex” [英] DataTables issue: VM9075 dataTables.min.js:24Uncaught TypeError: Cannot set property '_DT_CellIndex' of undefined
问题描述
我刚开始使用DataTables，创建表时一切都正常。
当我在表中显示5行，24行，47行时，数据表的行为与我预期的相同。
但是我有这个表约有700行，我在Google Chrome中收到错误，
VM9075 dataTables.min.js ：24Uncaught TypeError：无法设置未定义的属性_DT_CellIndex
在IE 9中，
SCRIPT5007：无法设置属性_DT_CellIndex的值：对象为空或未定义
jquery-1.10.2。 min.js，第4行字符2367
我没有jQuery包含两次btw。 p>
我不知道如何从这里继续。
我尝试使用未最终版本的.js文件调试更多自己，但我不断得到一个ext方法或属性未定义，也无法修复这一点。
任何帮助是赞赏！
我想出来了
最大的问题是不知道这个错误究竟是什么意思。
在我的情况下，这意味着您的表中每个< td> 元素的数量是< tr> ; 元素与< th> 元素的数量不匹配，这些元素是< thead> 元素
我的表正在由服务器生成，一些 我通过在我的表中添加空的 编辑1： < tr> code>元素具有27 < td> children（正在填充表的整个宽度，但是 tr> 元素只有3，4或5，... < td> 不是有效表的子元素。 / p>
< td> 元素解决了 ; tr> 元素缺少正确数量的< td> 元素
var makeTableValidObject = {
thisWasCalled：0，
makeTableValid：function（）{
var tableToWorkOn = document.getElementById（table1） ;
//检查< thead>中的列数标签
// thead // tr // th元素
var numberOfColumnsInHeadTag = tableToWorkOn.children [1] .children [0] .children.length;
var numberOf_trElementsToValidate = tableToWorkOn.children [2] .children.length;
//现在通过每个< tr>在< tbody>中并查看它们是否匹配的列的长度
// tbody // all trs // all tds elements
//tableToWorkOn.children[2].children.children）;
for（var i = 0; i< numberOf_trElementsToValidate; i ++）{
//行我的行确保列具有正确数量的元素
var tdColumnArray = tableToWorkOn.children [2 ] .children [i] .children
var trElementToAppendToIfNeeded = tableToWorkOn.children [2] .children [i];
if（tdColumnArray.length！= numberOfColumnsInHeadTag）{
//因为它们不匹配，使它们有效
if（tdColumnArray.length< numberOfColumnsInHeadTag）{
/ /添加必要数量的空白< td>标签到< tr>元素以使该< tr>有效
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>标签以使此< tr>必要时有效
}
}
}
}
};
$ b $已经有一段时间了，这个问题还有一堆意见。我已经更新了代码。
我用第二行代替第一行代码，以便更常用
var numberOfColumnsInHeadTag = tableToWorkOn.children [1] .children [0] .children.length;
var numberOfColumnsInHeadTag = tableToWorkOn.querySelectorAll（'thead'）[0] .querySelectorAll（'th'）;
几乎在以前的代码中，你看到children.children，我用querySelectorAll（ ...）功能
它使用css选择器，这使得它非常强大。
保持祝福
I just started using DataTables and everything works fine when creating the table.
When I display 5, 24, 47 rows in my table, DataTables behaves as I would expect.
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 "
and in 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"
I don't have jQuery included twice btw.
I'm not sure how to proceed from here.
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.
Any help is appreciated!
I figured it out
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."
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
}
}
}
}
};
Edit 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');
Pretty much where ever in the prior code you see the children.children I replaced that with the querySelectorAll(...) Function.
It uses css selectors which makes it amazingly powerful.
stay blessed
这篇关于DataTables问题：VM9075 dataTables.min.js：24Uncught TypeError：无法设置未定义的属性“_DT_CellIndex”的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
