使用javascript添加标题和Thead

Question

我用java脚本创建了一个html表，但没有理解如何添加标题和thead。

var arr =[
["Period Ends", "Payroll Due", "Payday"],   
["06/13/15",    "06/19/15", "06/26/15"],




];


var body, tab, th, tr, td, tn, row, col;
body = document.getElementsByTagName('body')[0];
tab = document.createElement('table');
for (row=0; row < arr.length; row++){
    tr = document.createElement('tr');
    for (col=0; col < arr[row].length; col++){
        td = document.createElement('td');
        tn = document.createTextNode(arr[row][col]);
        td.appendChild(tn);
        tr.appendChild(td);

    }
    tab.appendChild(tr);
}
body.appendChild(tab);

Answer 1

这是我将使用的方法

var arr =[
    ["Period Ends", "Payroll Due", "Payday"],   
    ["06/13/15",    "06/19/15", "06/26/15"],
];


var body = document.getElementsByTagName('body')[0];
var tab = document.createElement('table');
var cap = tab.createCaption();
var tr, td, col;

// set caption
cap.innerHTML = 'My Table Caption';

// start from first row (skip row headings)
for (var row=1; row < arr.length; row++){
    tr = tab.insertRow(row-1);

    for (col=0; col < arr[row].length; col++){
        td = tr.insertCell(col);
        td.innerHTML = arr[row][col];
    }
}

// add row headings
var header = tab.createTHead()
var headerRow = header.insertRow(0);
for (col=0; col < arr[0].length; col++){
    td = headerRow.insertCell(col);
    td.innerHTML = arr[0][col];
}

body.appendChild(tab);

这使用HTML-spec方法创建表元素

• createCaption
• insertRow
• createTHead
• insertCell
• innerHTML

我发现的唯一怪癖是我必须在tHead行之后添加body

这是 jsfiddle