本文详细介绍了如何利用javascript动态地创建html表格，并使用数组数据填充表格的每个单元格。教程涵盖了从html结构准备、css样式设置到核心javascript逻辑实现的完整过程，包括获取dom元素、遍历数组、创建行和单元格，以及将数据插入表格。通过示例代码，读者将学习如何高效且结构化地实现这一常见前端需求。

使用JavaScript动态生成HTML表格并填充数组数据

在现代Web开发中，经常需要根据后端数据或用户交互动态地在前端页面上展示信息。其中一个常见需求是根据JavaScript数组中的数据动态生成HTML表格。本教程将详细指导您如何使用纯JavaScript实现这一功能，确保生成的表格结构清晰、数据准确。

1. HTML结构准备

首先，我们需要在HTML页面中创建一个基础的表格容器。这个容器将作为JavaScript动态添加行和单元格的目标。为了方便JavaScript访问，我们为其指定一个唯一的id。同时，为了表格的语义化和可读性，我们通常会预先定义好表头。

    
    
    
    


    
水果列表
    

        

            
索引
            
水果名称
        
    

    

在上述HTML代码中，我们创建了一个id为fruits-table的

2. CSS样式设置

为了让表格在页面上呈现出良好的视觉效果，我们可以添加一些基本的CSS样式。这些样式将应用于表格、表头和数据单元格。

立即学习“Java免费学习笔记（深入）”；

/* style.css */
table,
td,
th {
  border: 1px solid #777; /* 设置边框 */
  text-align: center;    /* 文本居中 */
  border-collapse: collapse; /* 合并边框 */
  padding: 8px;          /* 内边距 */
}

table {
  width: 80%;            /* 表格宽度 */
  margin: 20px auto;     /* 居中显示 */
}

th {
  background-color: #f2f2f2; /* 表头背景色 */
}

这段CSS代码为表格、单元格和表头添加了边框，使文本居中，并设置了内边距和背景色，提升了表格的可读性。

云网OA

采用JSP开发的办公自动化产品、基于B/S结构，运行环境：JDK v1.5、Tomcat v5.5、MySQL v4.1，三者均为以上版本其他相关内容：可视化流程设计： 流程支持串签、会签和分支流程，可以设置流程节点的修改、删除权限，并可指定流程中各个用户在表单中可以填写的域。智能表单所见即所得设计： 智能设计，自动在数据库中生成表格，方便优化程序 公共交流： 集论坛、博客、聊天室于一体文件柜：C

下载

3. JavaScript核心逻辑

现在，我们将编写JavaScript代码来实现动态生成表格的核心功能。我们将定义一个数组来存储数据，并创建一个函数来处理表格的创建和数据填充。

// script.js

// 存储水果数据的数组
var fruits = ['apple', 'orange', 'grape', 'banana', 'guava', 'watermelon', 'mango'];

/**
 * showFruits 函数：
 * 动态地从 fruits 数组中获取数据，并将其添加到 HTML 表格中。
 */
function showFruits() {
  // 1. 通过 ID 获取到 HTML 页面中预设的表格元素
  const table = document.getElementById("fruits-table");

  // 2. 遍历 fruits 数组中的每一个元素
  fruits.forEach((fruit, index) => {
    // 3. 为每个水果数据创建一个新的表格行 (

代码解析：

1. 数据定义： fruits 数组包含了我们将要展示的水果名称。
2. 获取表格元素： document.getElementById("fruits-table") 通过ID获取到我们预设的表格容器。
3. 遍历数组： fruits.forEach((fruit, index) => { ... }) 遍历fruits数组。fruit是当前元素的值，index是当前元素的索引。
4. 创建行 (