纯JavaScript从数组生成HTML表格的问题求助

核心问题原因 #

你在addTableData函数中仅创建了单个元素，并在循环中重复使用这个行元素。由于DOM元素是引用类型，反复添加同一个到tbody不会创建新行，反而会移动它，同时所有都被附加到这同一个行上，导致所有数据集中在一行。

修正后的完整JavaScript代码 #

// Create variables to hold all the table elements I may need
let table = document.getElementById("theTable");
let tableContainer = document.getElementById("tableContainer"); // 修正拼写错误：tableCointainer → tableContainer

let tableHeader = document.createElement("thead");
let tableBody = document.createElement("tbody");
let textNode = document.createTextNode("£");

// Data fields
const columnName = ["date", "price", "item"];
const tableInputs = [
    ["01/02/20", `32.99`, "Pencil"],
    ["08/12/21", "94.88", "Food"],
    ["04/01/22", "32.11", "tax"],
    ["09/04/22", "83.12", "brake pads"]
];

// Create the table
createTable();

function createTable() {
    let tableRow = document.createElement("tr");    
    table.appendChild(tableHeader);
    tableHeader.appendChild(tableRow);

    columnName.forEach((column) => { // 变量名优化，语义更清晰
        let thElement = document.createElement("th");
        thElement.textContent = column;
        tableRow.appendChild(thElement);
    });

    addTableData();    
}

function addTableData() {
    table.appendChild(tableBody); // 仅需添加一次tbody到table

    tableInputs.forEach((rowData) => { // 变量名优化，语义更清晰
        // 为每一组数据创建新的<tr>元素
        let tableBodyRow = document.createElement("tr");
        tableBody.appendChild(tableBodyRow);

        rowData.forEach((cellData) => { // 变量名优化，语义更清晰
            let tableDataField = document.createElement("td");
            tableDataField.textContent = cellData;
            tableBodyRow.appendChild(tableDataField);
        });
    });
}

关键修改点 #

• 在tableInputs的循环内部每次创建新的元素，确保每一行数据对应一个独立的行节点
• 将table.appendChild(tableBody)移到循环外部，避免重复添加tbody
• 修正了tableContainer的拼写错误（原代码写为tableCointainer）
• 优化了变量命名，提升代码可读性

这样修改后，JavaScript会为tableInputs中的每一个子数组创建一个独立的，并将对应的添加到该行，最终生成结构正确的表格。

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