css 未捕获的类型错误:无法读取未定义的属性“className”

ivqmmu1c  于 2023-04-01  发布在  其他
关注(0)|答案(8)|浏览(184)

Google Chrome浏览器的开发者工具中出现以下错误:
未捕获的类型错误:无法读取未定义的属性“className”
抛出错误的代码是:

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。
救命啊!

q7solyqu

q7solyqu1#

另一个答案让我走上了正确的道路。
更简单地说,错误是我创建的表不正确。
我的标题列(当然是在标题内)与我的行列(在正文内)不匹配
在我的情况下,我在标题中有太多的列。

up9lanfz

up9lanfz2#

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

lndjwyie3#

Datatables要求你的html表是完美的。我发现我得到这个错误时,我没有一个相等的<th><td>的数量。确保你没有一个额外的头。

ej83mcc0

ej83mcc04#

我遇到了一个和你现在遇到的相同的错误。我曾经在使用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
}
?>

在长长的表的底部有一个错误,表明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?)。

umuewwlo

umuewwlo5#

在我的特定示例中,我将aTargets属性设置为数组索引超出了元素的范围。

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

这设置了7个td列,但只有6个。将其更改为以下内容更正了它:

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

inb24sb26#

它抛出这个错误是因为当dom第一次加载时,你使用的是before declare。
对于这个错误,我有一个解决方案写在下面:
你可以添加如果条件特定的元素是不像下面这样未定义

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

lyr7nygr7#

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

izj3ouym

izj3ouym8#

最近我也遇到了同样的问题...经过多次研究,我发现这个问题是由于数据表中绑定了大量的数据(〉1500),目前我将数据限制设置为1000。

相关问题