CODEWITHSUNDEEP
javascripthtml-table
java
java

Reputation: 1165

Create table column-headers dynamically

Right now I cannot figure out how to add headers for all the columns in this code where a html-table are created dynamically

function createTableAndInsert(sqlArray) {

//create table dynamically - only one row by the moment
var table = document.createElement('table');
for (var i = 1; i < 2; i++) {

    var tr = document.createElement('tr'); // row
    for (var j = 0; j < 8; j++) {

        var td = document.createElement('td'); //column
        var text = document.createTextNode(sqlArray[j]); //cell
        td.appendChild(text);
        tr.appendChild(td);
    }

    table.appendChild(tr);
}
document.getElementById('single_fine_view').appendChild(table);

}

Upvotes: 3

Views: 14854

Answers (3)

doctorjay
doctorjay

Reputation: 91

THEAD needs one or more TR elements:

var table = document.createElement('table');  //  'table' may be a reserved word 

var tblHead = document.createElement('thead');
var rowHead = document.createElement('tr');
table.appendChild(tblHead);
tblHead.appendChild(rowHead)
for(j=0; j<8; j++) {
    var celHead = document.createElement('th');
    //the array txtHeaders[] should be passed to your function if you have the values in advance
    // otherwise, you can access the header cells later by:
    // table.getElementsbyTagName('th')[].innerHTML
    celHead.innerHTML = txtHeaders[j]
    rowHead.appendChild(celHead)
}

// now do your row & table loops

Upvotes: 1

Gaurav B
Gaurav B

Reputation: 356

You can pass the header list separately to your function and add following code 

function createTableAndInsert(sqlArray,headerList) {
var table = document.createElement('table');
var tr = document.createElement('tr'); // Header row
for (var j = 0; j < 8; j++) {

    var th = document.createElement('th'); //column
    var text = document.createTextNode(headerList[j]); //cell
    th.appendChild(text);
    tr.appendChild(th);
}

table.appendChild(tr);
for (var i = 1; i < 2; i++) {

var tr = document.createElement('tr'); // row
for (var j = 0; j < 8; j++) {

    var td = document.createElement('td'); //column
    var text = document.createTextNode(sqlArray[j]); //cell
    td.appendChild(text);
    tr.appendChild(td);
}

table.appendChild(tr);
}
document.getElementById('single_fine_view').appendChild(table);
}

Upvotes: 4

gauravmuk
gauravmuk

Reputation: 1616

Your structure is: 

<tr>
 <td>
   <div></div>
   <div></div>
 </td>
</tr>

thead should be appended before each row.

<thead></thead>
<tr>
    <td>
        <div></div>
        <div></div>
    </td>
</tr>

Solution:

var thead = document.createElement('thead'); thead.innerHTML = 'Header';

Before table.appendChild(tr);, add this line table.appendChild(thead);

Upvotes: 1

Related Questions