使用J*aScript动态生成HTML表格并填充数组数据_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

使用J*aScript动态生成HTML表格并填充数组数据

2025-12-06

浏览次数：次

返回列表

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

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

使用J*aScript动态生成HTML表格并填充数组数据

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

1. HTML结构准备

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

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态生成表格</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>水果列表</h1>
    <table id="fruits-table">
        <tr>
            <th>索引</th>
            <th>水果名称</th>
        </tr>
    </table>

    <script src="script.js"></script>
</body>
</html>

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

元素，并为其添加了包含“索引”和“水果名称”的表头行。

2. CSS样式设置

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

/* 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

0查看详情

3. J*aScript核心逻辑

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

// script.js

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

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

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

    // 4. 创建一个单元格 (<td>) 用于显示索引
    const indexTd = document.createElement("td");
    // 设置索引单元格的文本内容
    indexTd.innerText = index;

    // 5. 创建另一个单元格 (<td>) 用于显示水果名称
    const fruitTd = document.createElement("td");
    // 设置水果名称单元格的文本内容
    fruitTd.innerText = fruit;

    // 6. 将索引单元格和水果名称单元格添加到当前行 (<tr>) 中
    tr.append(indexTd, fruitTd);

    // 7. 将创建好的行 (<tr>) 添加到表格 (<table>) 中
    table.append(tr);
  });
}

// 在页面加载完成后或通过某个事件（如按钮点击）调用此函数
// 这里我们直接调用，以便在页面加载时就显示表格
showFruits();

代码解析：

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

)： document.createElement("tr") 创建一个新的表格行元素。
创建单元格 (
、、等语义化标签，并为单元格添加scope属性，以提高表格的可访问性。
总结

通过本教程，您已经掌握了使用J*aScript动态生成HTML表格并填充数组数据的基本方法。这种技术是前端开发中非常常见的需求，理解其核心逻辑对于构建交互式和数据驱动的Web应用至关重要。通过灵活运用document.createElement()和Element.append()等DOM操作方法，您可以高效地管理和展示页面上的动态内容。

、
)： document.createElement("td") 创建两个新的表格数据单元格。 indexTd.innerText = index; 将当前元素的索引作为第一个单元格的内容。 fruitTd.innerText = fruit; 将当前水果名称作为第二个单元格的内容。追加单元格到行： tr.append(indexTd, fruitTd) 将创建的两个单元格追加到当前行tr中。追加行到表格： table.append(tr) 将填充好数据的行追加到表格table中。函数调用： showFruits(); 在脚本加载后立即执行此函数，从而在页面加载时就生成并显示表格。如果需要通过按钮点击等交互触发，可以将此调用放入事件监听器中。 4. 完整示例将上述HTML、CSS和JaScript代码分别保存到index.html、style.css和script.js文件中，并在浏览器中打开index.html，您将看到一个根据fruits数组动态生成的表格。注意事项性能优化：* 对于包含大量数据（例如数千行）的表格，频繁地操作DOM可能会导致性能问题。在这种情况下，可以考虑使用DocumentFragment来批量操作DOM，或者使用虚拟滚动等技术。清除现有数据：如果showFruits函数可能被多次调用（例如，每次点击按钮都刷新表格），您可能需要在添加新数据之前清除旧数据。可以通过 table.querySelectorAll('tr:not(:first-child)').forEach(row => row.remove()); 来移除除表头外的所有行。错误处理：在实际应用中，您应该添加错误处理机制，例如检查table元素是否成功获取，以防止因ID拼写错误等问题导致脚本失败。数据源：本教程使用硬编码的数组数据。在实际项目中，数据通常来自API请求或其他外部源。可访问性：考虑为表格添加