js dom操作table

function createTable(data) {
    let table = document.createElement('table');
    let thead = document.createElement('thead');
    let tbody = document.createElement('tbody');

    // 创建表头
    let headerRow = document.createElement('tr');
    Object.keys(data[0]).forEach(key => {
        let th = document.createElement('th');
        th.textContent = key;
        headerRow.appendChild(th);
    });
    thead.appendChild(headerRow);

    // 创建表格主体
    data.forEach(item => {
        let row = document.createElement('tr');
        Object.values(item).forEach(val => {
            let cell = document.createElement('td');
            cell.textContent = val;
            row.appendChild(cell);
        });
        tbody.appendChild(row);
    });

    table.appendChild(thead);
    table.appendChild(tbody);
    return table;
}

let data = [
    { name: 'Alice', age: 24 },
    { name: 'Bob', age: 27 }
];

document.body.appendChild(createTable(data));

function updateTable(table, newData) {
    let tbody = table.querySelector('tbody');
    tbody.innerHTML = ''; // 清空现有内容

    newData.forEach(item => {
        let row = document.createElement('tr');
        Object.values(item).forEach(val => {
            let cell = document.createElement('td');
            cell.textContent = val;
            row.appendChild(cell);
        });
        tbody.appendChild(row);
    });
}

function deleteTable(table) {
    table.parentNode.removeChild(table);
}

window.onload = function() {
    // 你的DOM操作代码
};

/* 简单的CSS重置 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}