如何修复JavaScript动态添加表格表头仅在第二行插入后显示的问题？

问题根源 #

你当前的代码把表头设置逻辑放在了数据行的循环内部，并且依赖table.rows[0]来修改表头内容——但第一次循环插入的是数据行，这时候rows[0]是你的第一条数据而非专门的表头行。如果只有一条数据，你相当于把表头内容硬写到了数据行的单元格里；如果有两条数据，第一次循环会把第一条数据行改造成"表头"，第二次插入第二条数据行时才会显示出类似表头的效果，这就是为什么表头仅在第二行插入后才显示的原因。

修复方案 #

我们需要把表头的创建逻辑从循环中抽离出来，在清空表格后先单独创建表头行，再循环插入数据行。这样不管有多少条数据，表头都会在第一次渲染时就显示出来，而且不会和数据行混淆。

修复后的完整代码如下：

var table = document.getElementById("Table"); 
// 清空表格
while(table.rows.length > 0) {
    table.deleteRow(0);
} 

// 第一步：先创建表头行（这是关键修改！）
var headerRow = table.insertRow(0);
// 创建表头的14个单元格（和数据行的单元格数量对应）
var headerCells = [];
for(var h = 0; h < 14; h++){
    headerCells.push(headerRow.insertCell(h));
}
// 设置表头内容
headerCells[0].innerHTML = " ";
headerCells[1].innerHTML = " ";
headerCells[2].innerHTML = "<b>NAME</b>";
headerCells[4].innerHTML = "<b>MODIFIED</b>";
headerCells[6].innerHTML = "<b>TIME</b>";
headerCells[8].innerHTML = " ";
headerCells[10].innerHTML = "<b>MORE</b>";
headerCells[12].innerHTML = " ";

// 第二步：循环插入数据行
// 注意这里循环从0开始，遍历所有data.Contents数据
for (var i = 0; i < data.Contents.length; i++) { 
    var row = table.insertRow(i+1); // 表头行是第0行，数据行从第1行开始插入
    var cell1 = row.insertCell(0), cell2 = row.insertCell(1),cell3 = row.insertCell(2),cell4 = row.insertCell(3),cell5 = row.insertCell(4),cell6 = row.insertCell(5),cell7 = row.insertCell(6); 
    var cell8 = row.insertCell(7), cell9 = row.insertCell(8),cell10 = row.insertCell(9),cell11 = row.insertCell(10),cell12 = row.insertCell(11),cell13 = row.insertCell(12),cell14 = row.insertCell(13); 

    // column1: file icon 
    var btn_fileIcon = document.createElement("input"); 
    btn_fileIcon.setAttribute("type","image"); 
    btn_fileIcon.setAttribute("src","images/file.png"); 
    btn_fileIcon.setAttribute("style","height:20px;width:20px"); 
    cell2.appendChild(btn_fileIcon); 

    // column2: file name 
    cell3.innerHTML = data.Contents[i].Key.replace(folderName+'/', '');

    // Time 
    var str = dateModified( data.Contents[i].LastModified); 
    cell5.innerHTML = " " + str; 
    cell5.setAttribute("style","padding-left: 4cm"); 
    cell5.setAttribute("position","fixed"); 
    cell5.style.textAlign = "center"; 

    // size 
    var s = Math.round( data.Contents[i].Size/1024); 
    var fileSize = s.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); 
    cell7.innerHTML = fileSize + " KB"; 
    cell7.setAttribute("style","padding-left: 4cm"); 
    cell7.setAttribute("position","fixed"); 
    cell7.style.textAlign = "center"; 

    // column3: download (csv) 
    var btn_download = document.createElement("input"); 
    btn_download.setAttribute("type","image"); 
    btn_download.setAttribute("src","images/download-button.png"); 
    btn_download.setAttribute("style","height:20px;width:20px;margin-left: 100px;margin-right: 10px;"); 
    btn_download.setAttribute("onclick","load2local(this);"); 
    btn_download.fileName = data.Contents[i].Key; 
    cell9.appendChild(btn_download); 

    // column4: delete 
    var btn_delete = document.createElement("input"); 
    btn_delete.setAttribute("type","image"); 
    btn_delete.setAttribute("src","images/close-browser.png"); 
    btn_delete.setAttribute("style","height:20px;width:20px;margin-left: 10px;margin-right: 10px;"); 
    btn_delete.setAttribute("onclick","deleteObj(this);"); 
    btn_delete.fileName = data.Contents[i].Key; 
    cell11.appendChild(btn_delete); 

    // load to NB 
    var btn_load2NB = document.createElement("input"); 
    btn_load2NB.setAttribute("type","image"); 
    btn_load2NB.setAttribute("src","images/eye.png"); 
    btn_load2NB.setAttribute("style","height:25px;width:25px;margin-left: 10px;margin-right: 10px;"); 
    btn_load2NB.fileName = data.Contents[i].Key; 
    btn_load2NB.setAttribute("onclick","load2NB(this);"); 
    btn_load2NB.fileSize = data.Contents[i].Size; 
    cell13.appendChild(btn_load2NB); 

    // checkbox 
    var checkbox = document.createElement("input"); 
    checkbox.setAttribute("type", "checkbox"); 
    checkbox.setAttribute("name", "all"); 
    checkbox.setAttribute("value", "ff"); 
    checkbox.fileName = data.Contents[i].Key; 
    cell1.appendChild(checkbox); 
    checkbox.checked = false; 

    var element = document.createElement('hr'); 
    element.filename = data.Contents[i].Key; 
    cell14.appendChild(element); 
} 

关键修改点说明 #

• 把表头创建逻辑从循环中独立出来，清空表格后立即插入表头行，确保它是表格的第一行。
• 数据行的循环从0开始遍历所有data.Contents数据，插入位置改为i+1（因为第0行是表头），避免覆盖表头。
• 表头单元格的创建用了循环简化代码，你也可以保持原来的手动创建方式，效果是一样的。

内容的提问来源于stack exchange，提问作者bhapri