纯JS生成表格：数组转HTML实战教程

通过组合使用这些方法，我们可以以声明式的方式构建表格，代码逻辑更清晰，也更不易出错。

3. 准备工作：HTML结构与数据模型

在开始编写JavaScript代码之前，我们需要一个简单的HTML容器来承载即将生成的表格。

HTML结构示例：

数据模型示例：

我们将使用两个数组来模拟表格的列名和行数据。

// 表格列名
const columnHeaders = ["日期", "价格", "商品"];

// 表格数据（多维数组，每个子数组代表一行）
const tableData = [
    ["01/02/20", "32.99", "铅笔"],
    ["08/12/21", "94.88", "食物"],
    ["04/01/22", "32.11", "税费"],
    ["09/04/22", "83.12", "刹车片"]
];

4. 动态表格生成实现步骤

我们将封装一个函数createDynamicTable，它接受列名数组、数据数组和目标容器ID作为参数，从而实现高度可复用的表格生成逻辑。

JavaScript代码 (app.js)：

// 表格列名
const columnHeaders = ["日期", "价格", "商品"];

// 表格数据（多维数组，每个子数组代表一行）
const tableData = [
    ["01/02/20", "32.99", "铅笔"],
    ["08/12/21", "94.88", "食物"],
    ["04/01/22", "32.11", "税费"],
    ["09/04/22", "83.12", "刹车片"]
];

/**
 * 动态生成HTML表格
 * @param {string[]} headers - 表格的列标题数组
 * @param {Array>} dataRows - 表格的行数据数组，每个子数组代表一行
 * @param {string} targetContainerId - 目标容器的DOM ID
 */
function createDynamicTable(headers, dataRows, targetContainerId) {
    const tableContainer = document.getElementById(targetContainerId);

    // 检查容器是否存在
    if (!tableContainer) {
        console.error(`错误：未找到ID为 '${targetContainerId}' 的容器元素。`);
        return;
    }

    // 清空容器，防止重复生成表格
    tableContainer.innerHTML = '';

    // 1. 创建表格元素
    const table = document.createElement("table");
    // 可以设置表格的属性，例如边框
    table.setAttribute("border", "1"); // 示例：设置边框

    // 2. 创建表头 (