原生javaScript做得动态表格(注释写的很清楚)

// 创建一个表格的函数
function createDynamicTable(rows, cols, data) {
    // 获取body元素
    const body = document.body;

    // 创建表格元素
    const table = document.createElement('table');
    table.border = 1; // 表格边框

    // 创建表头
    const thead = document.createElement('thead');
    const headerRow = document.createElement('tr');
    for (let i = 0; i < cols; i++) {
        const th = document.createElement('th');
        th.textContent = `Column ${i + 1}`; // 假设表头为Column 1, Column 2, ...
        headerRow.appendChild(th);
    }
    thead.appendChild(headerRow);
    table.appendChild(thead);

    // 创建表体
    const tbody = document.createElement('tbody');
    for (let r = 0; r < rows; r++) {
        const row = document.createElement('tr');
        for (let c = 0; c < cols; c++) {
            const td = document.createElement('td');
            // 假设数据按行和列索引简单填充，实际中这里应使用data[r][c]
            td.textContent = `Row ${r + 1}, Column ${c + 1}`;
            row.appendChild(td);
        }
        tbody.appendChild(row);
    }
    table.appendChild(tbody);

    // 将表格添加到body中
    body.appendChild(table);
}

// 调用函数创建一个5行4列的表格
createDynamicTable(5, 4, []); // 注意：这里data参数为空，因为我们使用简单文本填充

// 如果你想用真实的数据填充表格，可以修改data参数为二维数组
// 例如：createDynamicTable(5, 4, [
//     ['A1', 'B1', 'C1', 'D1'],
//     ['A2', 'B2', 'C2', 'D2'],
//     ...
// ]);

这段代码展示了如何使用原生JavaScript创建一个动态表格。它首先定义了一个`createDynamicTable`函数，该函数接受行数`rows`、列数`cols`和可选的数据数组`data`作为参数。函数内部通过DOM操作创建了表格、表头和表体，并将表格添加到文档的``中。如果提供了数据数组，你可以根据需要在内部逻辑中修改填充表体的方式。注意，这里的示例使用了简单的文本进行填充，作为演示。在实际应用中，你可能需要根据`data`数组的内容来动态填充表格。