未捕获的类型错误：无法读取未定义的属性“类名”

Posted 2023-03-06

【中文标题】未捕获的类型错误：无法读取未定义的属性“类名”

【英文标题】：Uncaught TypeError: Cannot read property 'className' of undefined

【发布时间】：2012-06-28 05:43:44

【问题描述】：

Google Chrome 的开发者工具中出现以下错误：

引发错误的代码是：

var oTable = $('#resultstable').dataTable(
                            "bAutoWidth" : true,
                            "iDisplayLength" : 10,
                            "bFilter" : false,
                            "bLengthChange" : false
                        );

resultstable是html中一个表的id：

<table cellpadding="0" cellspacing="0" border="0" id="resultstable"
                    name="resultstable" class="display datatable">

奇怪的是在table标签之后有一个if语句。该表运行得非常好，并且当程序被发送到 else if 部分时，CSS 正确显示，但是它抛出了上述错误，并且在 if 部分中没有应用 CSS。

请帮忙！

【问题讨论】：

请在您提到的else if 中包含完整代码。

它有很多代码，因为有数据表和东西被传递和改变。那里的很多代码确实应该在服务器页面上，但是我还没有机会将其移出，但是所有设置 tr 和 td css 的类在 if 和 else if 中都是相同的

你能把它放在jsfiddle 或github gists 上以便人们查看吗？

我最初尝试过，但结果并不正确。可能是因为所有的 java 代码，但这是我的链接：my jsfiddle

【参考方案1】：

遇到了类似的问题。根本情况是，当 dataTable 即将控制表时，我们的代码也试图同时操作表的属性。错误信息并没有这么说，但是，一旦表由 dataTable 单独管理，问题就消失了。

【参考方案2】：

它抛出这个错误是因为当 dom 首次加载时你在声明之前使用。

对于这个错误，我有一个解决方案如下：

如果条件特定元素没有像下面这样未定义，您可以添加

if(document.getElementsByTagName('button') !== undefined)
  // and write your needed code here

【参考方案3】：

在我的特定情况下，我将 aTargets 属性设置为我的元素边界之外的数组索引。

$('.datatable').dataTable(
  aoColumnDefs: [
    
      bSortable: false,
      aTargets: [0, 6]
    
  ],
  aaSorting: []
);

这个设置有 7 个 td 列，但只有 6 个。将其更改为以下更正：

$('.datatable').dataTable(
  aoColumnDefs: [
    
      bSortable: false,
      aTargets: [0, 5]
    
  ],
  aaSorting: []
);

【讨论】：

这条评论拯救了我的一天。我们不得不在几年前创建的网格视图中隐藏一些列。在我们删除了不需要的列之后，这个错误困扰了我们好几天。更正 aTargets 值后，错误得到修复。

【参考方案4】：

Datatables 要求您的 html 表格是完美的。我发现当我没有相等数量的<th> 和<td> 时出现此错误。确保您没有额外的标题。

【参考方案5】：

另一个可能的原因是，如果您在“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] ]
);

【讨论】：

那是正确的！ :) 谢谢

【参考方案6】：

另一个答案让我走上了正轨。

更简洁地说，错误是我创建的表不正确。

我的标题列（当然是在 thead 内）与我的行列（在 tbody 内）不匹配

在我的情况下，标题中的列太多。

【讨论】：

这就是我的问题，解决了，因为我以前不知道，但现在我发现知道数据表的列和行数据之间必须匹配。这很有趣。

【参考方案7】：

我遇到了与您现在遇到的相同的错误。我曾经在使用 Chosen 库时遇到过类似的错误。问题是（在 Chosen 的情况下）使用了带有 [] 字符的 ID，从而混淆了 CSS 选择器和 ID 之间的 javascript（请记住，在 CSS 中我们可以使用 [] 来指定属性）。

但是，对于 DataTables，我注意到 DataTables 脚本本身在 tbody 中每个 tr 元素的第一个元素之前添加了 class = " "。

这是因为 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

?>

long, long 表的底部出现错误，表明 postgres 无法跳转到第 208 行。这告诉我需要在 i - 1 或 $currentRow - 1 处停止循环。

因此是固定的工作代码：

<?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

?>

执行此更改允许 DataTables 正常执行。

因此，尽管我无法提供可行的解决方案，但我建议您查看您的 html 标记，因为这可能是您问题的根源（例如，您的表格是否有 tbody？）。

【讨论】：

+1 用于查看 html 标记。我遇到了同样的错误，因为 在 foreach 循环之外（因此只有最后一行是属性关闭的）