Create table column-headers dynamically

Question

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

Gaurav B · Accepted Answer · 2017-06-18 19:20:12Z

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

gauravmuk · Accepted Answer · 2017-06-18 19:11:12Z

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

doctorjay · Accepted Answer · 2017-06-18 19:35:16Z

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

Collectives™ on Stack Overflow

Create table column-headers dynamically

3 Answers 3

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Linked

Related