“纵有疾风来，人生不言弃”，这句话送给正在学习文章的朋友们，也希望在阅读本文《JavaScript生成表格：数组转HTML表格完整教程》后，能够真的帮助到大家。我也会在后续的文章中，陆续更新文章相关的技术文章，有好的建议欢迎大家在评论留言，非常感谢！

核心概念与API

在Web开发中，将结构化数据以表格形式展示是常见的需求。手动编写HTML表格（

这些专用方法能够更好地处理表格的内部结构和语义，减少代码量，并提高可读性，是动态生成表格的首选方式。

实现步骤

本教程将通过一个具体的示例，演示如何从预定义的数据数组中生成一个完整的HTML表格。

1. 数据准备

首先，定义用于构建表格的列名和数据。在实际应用中，这些数据通常来自后端API。

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"]
];

columnName数组包含了表格的列标题，而tableInputs是一个二维数组，其中每个内部数组代表表格的一行数据。

2. HTML结构

在HTML文件中，只需要一个简单的容器元素来容纳通过JavaScript生成的表格。

3. JavaScript函数：createTable

创建一个名为createTable的函数，封装所有表格生成逻辑。

/**
 * 从数组数据动态创建HTML表格。
 */
function createTable() {
    // 获取表格将要插入的容器元素
    const tableContainer = document.getElementById("tableContainer");

    // 清空容器内容，避免重复添加（如果函数可能被多次调用）
    while (tableContainer.firstChild) {
        tableContainer.removeChild(tableContainer.firstChild);
    }

    // 1. 创建一个新的table元素
    const table = document.createElement("table");
    table.setAttribute("border", "1"); // 为演示方便，添加边框

    // 2. 创建表头 (

    
    
    
    


    
动态生成HTML表格示例
    

        
    
    

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