js如何动态生成表格

// 示例数据
const data = [
    { name: "Alice", age: 24 },
    { name: "Bob", age: 27 },
    { name: "Charlie", age: 22 }
];

// 创建表格
function createTable(data) {
    // 创建 table 元素
    const table = document.createElement('table');
    table.style.borderCollapse = 'collapse'; // 合并边框

    // 创建表头
    const thead = document.createElement('thead');
    const headerRow = document.createElement('tr');
    Object.keys(data[0]).forEach(key => {
        const th = document.createElement('th');
        th.textContent = key;
        th.style.border = '1px solid black';
        th.style.padding = '8px';
        headerRow.appendChild(th);
    });
    thead.appendChild(headerRow);
    table.appendChild(thead);

    // 创建表体
    const tbody = document.createElement('tbody');
    data.forEach(item => {
        const row = document.createElement('tr');
        Object.values(item).forEach(value => {
            const cell = document.createElement('td');
            cell.textContent = value;
            cell.style.border = '1px solid black';
            cell.style.padding = '8px';
            row.appendChild(cell);
        });
        tbody.appendChild(row);
    });
    table.appendChild(tbody);

    return table;
}

// 将表格插入到页面中
document.body.appendChild(createTable(data));