使用 JavaScript 将数据表添加到 HTML table：无法读取 null 的属性 'parentNode'

Question

我正在尝试将我使用 JavaScript 即时创建的 table 制作成 .dataTable。我将我的代码与我的同事进行了比较，结果几乎相同。我已经进行了必要的更改，但我一直在控制台中收到 JavaScript 错误："Cannot read property 'parentNode' of null"。

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

谁能看出是什么原因造成的？可能是范围错误，或者 parentheses/bracket 在错误的位置。

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);
});
}

Answer 1

我认为您必须在 table

中包含一个有效的 thead 元素

Answer 2

在将数据行添加到 table 之前，我不会将 table 附加到 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/

Answer 3

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

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

Answer 4

我和这个图书馆有同样的情况。我将它与 Knockout.JS 一起使用，为了让它工作，我在 viewModel 的末尾添加了一个超时：

setTimeout(() => {

    // Call the get function at load
    GetFiltersData();

}, 0);

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

使用 JavaScript 将数据表添加到 HTML table：无法读取 null 的属性 'parentNode'

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

html

javascript

datatable

parent-node

使用 JavaScript 将数据表添加到 HTML table：无法读取 null 的 属性 'parentNode'

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

html

javascript

datatable

parent-node

使用 JavaScript 将数据表添加到 HTML table：无法读取 null 的属性 'parentNode'