创建表的列标题动态

Question

现在我无法弄清楚如何添加标题为所有在该代码中一个HTML表是动态创建

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

} 

Answer 1

您可以分别通过标题列表，你的函数，并添加以下代码

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

Answer 2

您的结构柱：

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

adad应在每行之前添加。

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

解决方案：

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

table.appendChild(tr);之前，加入这一行table.appendChild(thead);

Answer 3

THEAD需要o ne或更多TR元素：

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