JS 動態生成 HTML Table：表頭與列數由變數決定

資料結構

var dates = ["2015-7-1", "2015-7-2", "2015-7-3"];
var names = ["張三","李四","王五","趙六"];
// 假設內容資料對應 dates × names 矩陣
var content = [
  ["A1","A2","A3"],
  ["B1","B2","B3"],
  ["C1","C2","C3"],
  ["D1","D2","D3"]
];

純 JS 生成字串法

function buildTable(dates, names, content) {
    var html = ['<table border="1">'];
    // 表頭
    html.push('<tr><th></th>');
    dates.forEach(d => html.push('<th>' + d + '</th>'));
    html.push('</tr>');
    // 資料列
    names.forEach((name, i) => {
        html.push('<tr><td>' + name + '</td>');
        content[i].forEach(val => html.push('<td>' + val + '</td>'));
        html.push('</tr>');
    });
    html.push('</table>');
    return html.join('');
}
document.getElementById('container').innerHTML = buildTable(dates, names, content);

進階：使用模板引擎或框架

• Vue/React：資料驅動視圖，自動處理動態列渲染。
• Layui Table / DataTables：傳入 cols 陣列動態定義欄位，支援分頁/排序/匯出。

關鍵點

雙重迴圈（列 × 行）構建 `...`，陣列 join('') 比字串連接效能更好，最後一次性 innerHTML 寫入容器減少回流。