Table header missing from exported PDF

Question

I'm trying to convert HTML5 table using jspdf (Similar to Export HTML table to pdf using jspdf) . However, the elements in my table are generated dynamically

function createTable(){
    var reportDiv = document.getElementById('customers');
    var table = document.createElement('table');
    table.id = 'tab_customers';
    table.className = 'table table-striped';
    var thead = document.createElement('thead');


    var tableHeader = document.createElement('th');
    tableHeader.innerHTML = "Name";
    thead.appendChild(tableHeader);

    var tableHeader = document.createElement('th');
    tableHeader.innerHTML = "Status";
    thead.appendChild(tableHeader);


    table.appendChild(thead);

    var row = table.insertRow(0);
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);

    cell1.innerHTML = "json";
    cell2.innerHTML = "fail";

    reportDiv.appendChild(table);
   return reportDiv;
}

PDF gets created, but the problem is it fails to show the table header. However if I create the table manually ( copy - paste) from the above dom, table header is rendered. Any help on this would be highly appreciated. Thanks

score 1 · Answer 1 · answered Oct 06 '14 at 07:01

th element has to be wrapped around tr element. Then tr is appended to thead, finally to table element.

 function createTable(){
        var reportDiv = document.getElementById('customers1');
        var table = document.createElement('table');
        table.id = 'tab_customers1';
        table.className = 'table table-striped';
        var thead = document.createElement('thead');
        var tr = document.createElement('tr');

        var tableHeader = document.createElement('th');
        tableHeader.innerHTML = "Name";
        tr.appendChild(tableHeader);

        var tableHeader = document.createElement('th');
        tableHeader.innerHTML = "Status";
        tr.appendChild(tableHeader);

        thead.appendChild(tr);

        table.appendChild(thead);

        var row = table.insertRow(0);
        var cell1 = row.insertCell(0);
        var cell2 = row.insertCell(1);

        cell1.innerHTML = "json";
        cell2.innerHTML = "fail";

        reportDiv.appendChild(table);
       return reportDiv;
    }

Table header missing from exported PDF

1 Answers1