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

admin管理员组

文章数量:1345897

I am trying to make the table that I am creating on the fly with JavaScript into a .dataTable. I have pared my code to my co-workers and it is almost identical. I have made the necessary changes, but I keep getting the JavaScript error: "Cannot read property 'parentNode' of null" in the console.

All of the code is executing perfectly. The new table is being displayed in the browser, but once it tries to run the line $('#data').dataTable({"paging": false}); it gives me the error.

Can anyone see what is causing this? Maybe a scope error, or a parentheses/bracket in wrong spot.

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

I am trying to make the table that I am creating on the fly with JavaScript into a .dataTable. I have pared my code to my co-workers and it is almost identical. I have made the necessary changes, but I keep getting the JavaScript error: "Cannot read property 'parentNode' of null" in the console.

All of the code is executing perfectly. The new table is being displayed in the browser, but once it tries to run the line $('#data').dataTable({"paging": false}); it gives me the error.

Can anyone see what is causing this? Maybe a scope error, or a parentheses/bracket in wrong spot.

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

• javascript
• html
• datatable
• parent-node

Share Improve this question Follow edited Jun 14, 2016 at 5:27 Roger 1,63122 gold badges3030 silver badges5757 bronze badges asked May 15, 2015 at 17:16 webminer07webminer07 31344 gold badges88 silver badges2525 bronze badges 4

• 2 I feel like we're not seeing everything . . . where is table defined? Where is the error occuring, according to the console (because I don't see any reference to parentNode in your code)? – talemyn Commented May 15, 2015 at 17:22
• Well I define the table on the fifth line with var tablearea = document.getElementById('div1'), table = document.createElement('table'); table.id = "data"; table.style.fontSize = "small"; table.width = "100%"; but this is a team project made up of tons of files, but the parentNode error seems like a mon error not particular to a specific parentNode variable – webminer07 Commented May 15, 2015 at 17:26
• Well, parentNode isn't a variable, it's a property of the JS Node object ( developer.mozilla/en-US/docs/Web/API/Node/parentNode ) that represents the parent of a current element node. Based on the error, somewhere in the logic for dataTable it is trying to find the parentNode of a non-existant element. My bet is that it, you are calling $('#data').dataTable({"paging": false}); before the data table element has finished being added to the DOM, so it can't find it. – talemyn Commented May 15, 2015 at 17:48
• I've thought about this, but I've stepped through step by step in the Chrome debugger, and watched the table with id='data' get added. And then subsequently everything after get added to the table. – webminer07 Commented May 15, 2015 at 18:01

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

I think you must include a valid thead element in your table

I had this problem when using DataTables.js directory and I solved it by empty the table before any refresh or refill:

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

I would not append the table to the DOM until the data rows were added to the table. So I would try something like the following instead (Inside the JSON callback) :

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

Here's a workin jsbin: http://jsbin./vacabe/1/

I had the same situation with this library. I'm using it with Knockout.JS and to make it work i added at the end of my viewModel a timeout:

setTimeout(() => {

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

}, 0);

This will not affect you page and i tested this with several browsers with success.

本文标签： Adding dataTable to HTML table with JavaScript Cannot read property 39parentNode39 of nullStack Overflow