web-dev-qa-db-ja.com

不明なTypeError：未定義のプロパティ 'className'を読み取れません

Google Chromeの開発者ツールで次のエラーがスローされています。

不明なTypeError：未定義のプロパティ '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">

奇妙なことに、テーブルタグの後にifステートメントがあります。テーブルは完全に正常に実行され、プログラムがelse if{}セクションに送信されるとCSSが正しく表示されますが、if{}セクションにある場合は上記のエラーがスローされ、CSSは適用されません。

助けてください！

javascriptcssgoogle-chromedatatableshtml-table
25
ph_leh

もう1つの答えは、私を正しい方向に導きました。

もっと簡潔に言うと、エラーは、作成中のテーブルが間違っていたということでした。

ヘッダー列（もちろんthead内）が行列（tbody内）と一致しませんでした

私の状況では、ヘッダー内の列が多すぎました。

51
Nathan Koop

別の考えられる原因は、テーブルに「td」要素があるよりも多くの列を「aoColumnDefs」属性にリストした場合です。

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] }]
});
11
Toby Artisan

Datatablesでは、htmlテーブルが完全である必要があります。 <th>と<td>の量が等しくないときに、このエラーが発生することがわかりました。余分なヘッダーがないことを確認してください。

10
Justin

現在取得しているエラーと同一のエラーが発生しました。 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がありますか？）。

2
user1429980

私の特定のケースでは、要素の境界外の配列インデックスで設定されたaTargetsプロパティがありました。

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

これにより、7個のtd列が設定されましたが、6個しかありませんでした。以下に変更すると、修正されました。

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

Domが最初にロードされるとき、宣言する前に使用していたため、このエラーがスローされます。

このエラーのために、私は以下に書かれた解決策を1つ持っていました：

条件の特定の要素が以下のように未定義でない場合は追加できます

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

同様の問題が発生しました。根本的なケースは、dataTableがテーブルを制御しようとしている間に、コードがテーブルのプロパティを同時に操作しようとしたことです。エラーメッセージにはそのようには書かれていませんが、テーブルがdataTableのみによって管理されるようになった後、問題はなくなりました。

0
Gil Shapir