Javascript 数据表问题：VM9075 dataTables.min.js:24Uncaught TypeError：无法设置未定义的属性“_DT_CellIndex”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35904708/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
DataTables issue: VM9075 dataTables.min.js:24Uncaught TypeError: Cannot set property '_DT_CellIndex' of undefined
提问by Coty Embry
I just started using DataTables and everything works fine when creating the table.
我刚开始使用 DataTables，创建表时一切正常。
When I display 5, 24, 47 rows in my table, DataTables behaves as I would expect.
当我在表中显示 5、24、47 行时，DataTables 的行为与我预期的一样。
But I have this table that has around 700 rows and I get the error in Google Chrome,
但是我有一张大约有 700 行的表，我在谷歌浏览器中收到错误消息，
"VM9075 dataTables.min.js:24Uncaught TypeError: Cannot set property '_DT_CellIndex' of undefined "
and in IE 9,
在 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.
顺便说一句，我没有两次包含 jQuery。
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.
我尝试使用 .js 文件的未缩小版本来自己调试更多，但我一直收到“ext”方法或属性未定义，也无法修复。
Any help is appreciated!
任何帮助表示赞赏！
回答by Coty Embry
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."
最大的问题是不知道这个错误究竟意味着什么。在我的情况下，这意味着“<td>表中作为<tr>元素子元素的每个元素的数量与作为<th>元素子元素的元素数量不匹配<thead>。”
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.
我的表格是由服务器生成的，其中一些<tr>元素有 27个子元素<td>（填满了整个表格的宽度，但有些<tr>元素只有 3、4 或 5 个……<td>不是一个有效的表。
I solved it by adding empty <td>elements in my table for the <tr>elements that lacked the correct number of <td>elements
我通过<td>在表格中为<tr>缺少正确数量<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
}
}
}
}
};
Edit 1:
编辑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.
几乎在之前的代码中你看到 children.children 我用 querySelectorAll(...) 函数替换了它。
It uses css selectors which makes it amazingly powerful.
它使用 css 选择器，这使它非常强大。
stay blessed
祝好运
回答by frostedpops
Ran into this same issue and implemented this same solution (essentially) in jquery based on Coty's. Hope this helps someone. :)
遇到了同样的问题，并在基于 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>');
}
});
});
回答by Abhishek Poojary
As answered by Coty, the problem lies in the mismatch of tdelements generated in the header and body of table.
正如 Coty 所回答的，问题在于表头和表体中生成的td元素不匹配。
I'd like to highlight one of the reasons why it can occur (For .Net Users). If Page numbers are being displayed at the end of gridview, they can disrupt table structure.
我想强调它可能发生的原因之一（对于 .Net 用户）。如果页码显示在 gridview 的末尾，它们可能会破坏表格结构。
Remove AllowPaging="true"from your gridview to solve this. And no worries because Datatable handles Paging.
从您的 gridview 中删除AllowPaging="true"以解决此问题。不用担心，因为 Datatable 处理分页。
回答by Mahesh Prajapati
you always keep four column but sometimes you will receive or append null tdor only one td, tdcount always match with total column so when you does not have record then make tdas following.
您总是保留四列，但有时您会收到或附加 nulltd或仅一列td，td计数始终与总列匹配，因此当您没有记录时，请td按以下方式进行。
<th>No</th>
<th>Name</th>
<th>place</th>
<th>Price</th>
----------------------------------------
<td colspan="4">Data not found.</td>
<td style="display: none;"></td>
<td style="display: none;"></td>
<td style="display: none;"></td>
回答by ryanrain
this error can also be triggered if you try to set options for the responsive extensionfor more columns than you have.
如果您尝试为比您拥有的列数更多的响应式扩展设置选项，也可能触发此错误。
回答by jay
$( '.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>');
}
});
});
