使用JavaScript添加数据表到HTML表:无法读取属性'parentNode'零

Adding dataTable to HTML table with JavaScript: Cannot read property 'parentNode' of null

本文关键字：读取 属性 parentNode 数据表 添加 JavaScript HTML 使用      更新时间：2023-09-26

我正试图使我正在创建的表与JavaScript到.dataTable的飞行。我将我的代码与同事的代码进行了比较，发现它们几乎是相同的。我已经做了必要的改变，但我不断得到JavaScript错误:"无法读取属性'parentNode' null"在控制台中。

所有的代码都执行得很好。新表正在浏览器中显示，但是一旦它试图运行$('#data').dataTable({"paging": false});行，它就会给我一个错误。

有人知道是什么原因造成的吗?可能是作用域错误，或者括号/括号在错误的位置。

function Load(p1, p2) {
var work= "";
$('#div1').empty();
var tablearea = document.getElementById('div1'),
table = document.createElement('table');
table.id = "data";
table.style.fontSize = "small";
table.width = "100%";
var tbody = document.createElement('tbody');
tbody.id = "dataTB";
table.appendChild(tbody);
tablearea.appendChild(table);
var url = sessionStorage.baseUrl + "XXXXXXXXX";
$.getJSON(url)
    .done(function (data) {
        var results = $.parseJSON(data);
        if (results != null)
        {
            for (i = 0; i < results.length; i++) {
                    work += "<tr><td>" + results.data[i].info + "</td></tr>";
                }
        }
        $('#dataTB').html(work);
        $('#data').dataTable({"paging": false});
    })
    .fail(function (jqXHR, textStatus, err) {
        alert('Error: ' + err);
});
}

我认为你必须在你的表中包含一个有效的thead元素

我在使用DataTables.js目录时遇到了这个问题，我通过在任何刷新或重新填充之前清空表来解决这个问题:

$('#data').empty();

在将数据行添加到表中之前，我不会将表附加到DOM。所以我会尝试下面的东西(JSON回调内部):

var tbody = document.createElement('tbody');
    tbody.id = "dataTB";
    table.appendChild(tbody);
var tablearea = document.getElementById('div1'),
    table = document.createElement('table');
    table.id = "data";
    table.style.fontSize = "small";
    table.width = "100%";
for (i = 0; i < results.length; i++) {
  $(tbody).append("<tr><td>" + results.data[i].info + "</td></tr>");
}
tablearea.appendChild(table);

这是一个工作的jsbin: http://jsbin.com/vacabe/1/

我在这个库中遇到了同样的情况。我使用它与Knockout.JS，并使其工作，我添加了在我的viewModel超时结束:

setTimeout(() => {
    // Call the get function at load
    GetFiltersData();
}, 0);

这不会影响你的页面，我在几个浏览器上测试了这个，都成功了。

相关文章：