Javascript 未捕获的类型错误：无法读取未定义的属性“className”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11215258/
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
Uncaught TypeError: Cannot read property 'className' of undefined
提问by ph_leh
The following error is being thrown in Google Chrome's developers tools:
Google Chrome 的开发人员工具中抛出以下错误：
Uncaught TypeError: Cannot read property 'className' of undefined
未捕获的类型错误：无法读取未定义的属性“className”
The code on which the error is being thrown is:
抛出错误的代码是：
var oTable = $('#resultstable').dataTable({
"bAutoWidth" : true,
"iDisplayLength" : 10,
"bFilter" : false,
"bLengthChange" : false
});
resultstable is the id of a table in the html:
结果表是 html 中表的 id：
<table cellpadding="0" cellspacing="0" border="0" id="resultstable"
name="resultstable" class="display datatable">
The weird thing is that after the table tag there is an if statement. The table runs perfectly fine and the CSS shows up correctly when the program is sent into the else if{}section, but it throws the above error and no CSS is applied when it is in the if{}section.
奇怪的是，在 table 标记之后有一个 if 语句。当程序被发送到 elseif{}部分时，表格运行得很好并且 CSS 正确显示，但是它抛出上述错误并且当它在该if{}部分时没有应用 CSS 。
Help please!
请帮忙！
回答by Nathan Koop
The other answer put me on the right track.
另一个答案让我走上了正轨。
More succinctly, the error was that the table I was creating was incorrect.
更简洁地说，错误是我创建的表不正确。
My header columns (inside a thead of course), did not match up with my row columns (inside the tbody)
我的标题列（当然在头条内）与我的行列（在 tbody 内）不匹配
In my situation, I had too many columns inside the header.
在我的情况下，标题中有太多列。
回答by Toby Artisan
Another possible cause is if you list more columns in the "aoColumnDefs" attribute than there are "td" elements in the table.
另一个可能的原因是，如果您在“aoColumnDefs”属性中列出的列多于表中“td”元素的数量。
var yourTable = $('#product-search-results-table').dataTable({
// If you only have three columns in the HTML table, then this line will cause an error, because it lists four columns in "aoColumnDefs".
"aoColumnDefs": [{ "bSortable": false, "aTargets": [0, 1, 2, 3] }]
});
回答by Justin
Datatables requires that your html table is perfect. I found that I got this error when I did not have an equal amount of <th>and <td>. Make sure you do not have an extra header.
数据表要求您的 html 表是完美的。我发现当我没有等量的<th>and时我得到了这个错误<td>。确保您没有额外的标题。
回答by user1429980
I got an identical error to the one you're getting now. I once encountered a very similar error using the Chosen library. The problem was (in Chosen's case) that IDs with the []characters were being used, thus confusing Javascript between css selectors and ids (remember that in CSS we can use []to specify attributes).
我遇到了与您现在遇到的错误相同的错误。我曾经在使用 Chosen 库时遇到了一个非常相似的错误。问题是（在 Chosen 的情况下）使用带有[]字符的ID ，从而混淆了 css 选择器和 id 之间的 Javascript（请记住，在 CSS 中我们可以使用[]来指定属性）。
In the case of DataTables, however, I noticed that the DataTables script itself was prepending class = " "before the first element in every tr element within the tbody.
然而，在 DataTables 的情况下，我注意到 DataTables 脚本本身class = " "在tbody.
The reason for this was because the HTML output from the php had a logical error. The faulting code:
这是因为 php 的 HTML 输出有逻辑错误。故障代码：
<?php
for ($currentRow = 0 ; $currentRow <= $query_length; $currentRow++) {
?>
<tr>
<?php
list($job_id, $company_id, $job_title, $industry_id, $profession_int, $job_openings, $job_city, $job_salary_start, $job_end_date, $job_start_date, $job_skills, $company_name, $isConfidential, $job_experience_level) = dbRow($query_results, $currentRow);
echo "<td class = \"detailed-job-row\">" . $job_title . "</td>";
echo "<td class = \"detailed-job-row\">" . $company_name . "</td>";
echo "<td class = \"detailed-job-row\">" . $industry_id . "</td>";
echo "<td class = \"detailed-job-row\">" . $profession_int . "</td>";
echo "<td class = \"detailed-job-row\">" . $job_openings . "</td>";
echo "<td class = \"detailed-job-row\">" . $job_city . "</td>";
echo "<td class = \"detailed-job-row\">" . $job_salary_start . "</td>";
echo "<td class = \"detailed-job-row\">" . $job_end_date . "</td>";
echo "<td class = \"detailed-job-row\">" . $job_start_date . "</td>";
echo "<td class = \"detailed-job-row\">" . $job_skills . "</td>";
echo "<td class = \"detailed-job-row\">" . $job_experience_level . "</td>";
?>
</tr>
<?php
} ?>
</tbody>
</table>
<?php
}
?>
There was an error at the bottom of the long, long table, indicating that postgres could not jump to row 208. This told me I needed to stop looping at i - 1, or $currentRow - 1.
长长的表的底部有一个错误，表明 postgres 无法跳转到第 208 行。这告诉我需要在i - 1, 或处停止循环$currentRow - 1。
Hence the fixed, working code:
因此，固定的工作代码：
<?php
for ($currentRow = 0 ; $currentRow <= $query_length - 1; $currentRow++) {
?>
<tr>
<?php
list($job_id, $company_id, $job_title, $industry_id, $profession_int, $job_openings, $job_city, $job_salary_start, $job_end_date, $job_start_date, $job_skills, $company_name, $isConfidential, $job_experience_level) = dbRow($query_results, $currentRow);
echo "<td class = \"detailed-job-row\">" . $job_title . "</td>";
echo "<td class = \"detailed-job-row\">" . $company_name . "</td>";
echo "<td class = \"detailed-job-row\">" . $industry_id . "</td>";
echo "<td class = \"detailed-job-row\">" . $profession_int . "</td>";
echo "<td class = \"detailed-job-row\">" . $job_openings . "</td>";
echo "<td class = \"detailed-job-row\">" . $job_city . "</td>";
echo "<td class = \"detailed-job-row\">" . $job_salary_start . "</td>";
echo "<td class = \"detailed-job-row\">" . $job_end_date . "</td>";
echo "<td class = \"detailed-job-row\">" . $job_start_date . "</td>";
echo "<td class = \"detailed-job-row\">" . $job_skills . "</td>";
echo "<td class = \"detailed-job-row\">" . $job_experience_level . "</td>";
?>
</tr>
<?php
} ?>
</tbody>
</table>
<?php
}
?>
Performing this change allowed DataTables to perform properly.
执行此更改允许数据表正确执行。
So although I cannot provide a working solution, I do advise you to look at your html mark-up, as that may be the source of your problem (ex, does your table have a tbody?).
因此，尽管我无法提供可行的解决方案，但我建议您查看您的 html 标记，因为这可能是您问题的根源（例如，您的表格是否有tbody？）。
回答by jth_92
In my specific case, I had the aTargets properties set with array indices outside the bounds for my elements.
在我的特定情况下，我将 aTargets 属性设置为元素边界外的数组索引。
$('.datatable').dataTable({
aoColumnDefs: [
{
bSortable: false,
aTargets: [0, 6]
}
],
aaSorting: []
});
This set that there were 7 td columns, but there were only 6. Changing it to the following corrected it:
这个设置有 7 个 td 列，但只有 6 个。将其更改为以下更正了它：
$('.datatable').dataTable({
aoColumnDefs: [
{
bSortable: false,
aTargets: [0, 5]
}
],
aaSorting: []
});
回答by dipak harishbhai
It's throwing this error because when dom first loads you were using before declare.
它抛出此错误是因为当 dom 首次加载时，您在声明之前使用。
for this error i had one solution written below:
对于这个错误，我在下面写了一个解决方案：
you can add if condition particular element is not undefined like below
如果条件特定元素不是未定义，则可以添加如下所示
if(document.getElementsByTagName('button') !== undefined){
// and write your needed code here
}
回答by Gil Shapir
Encountered similar problem. Root case was that while dataTable was about to take control of the table, our code also tried to manipulate properties of the table a the same time. The error message does not say so, however, once the table was left to be managed solely by dataTable, the problem was gone.
遇到了类似的问题。根本情况是，当 dataTable 即将控制表时，我们的代码同时也尝试操作表的属性。错误消息并没有这样说，但是，一旦将表留给 dataTable 单独管理，问题就消失了。
