首页 > 文章 > 前端

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

时间：2025-12-14 21:36:46 218浏览收藏

编程并不是一个机械性的工作，而是需要有思考，有创新的工作，语法是固定的，但解决问题的思路则是依靠人的思维，这就需要我们坚持学习和更新自己的知识。今天golang学习网就整理分享《JavaScript动态生成表格填充数组数据》，文章讲解的知识点主要包括，如果你对文章方面的知识点感兴趣，就不要错过golang学习网，在这可以对大家的知识积累有所帮助，助力开发能力的提升。

使用JavaScript动态创建HTML表格并填充数组数据

本文详细介绍了如何利用JavaScript动态创建HTML表格，并将数组中的数据逐一填充到表格的每个单元格中。通过DOM操作，我们将学习如何获取现有表格、遍历数据、创建行和单元格，最终构建一个结构清晰、内容丰富的表格。教程包含完整的代码示例和步骤解析，帮助读者掌握前端数据展示的核心技巧。

在现代Web开发中，动态地展示数据是常见的需求。当数据源是一个JavaScript数组时，我们经常需要将其内容以表格形式呈现在网页上。本教程将指导您如何使用纯JavaScript（不依赖任何库）实现这一功能，包括准备HTML结构、应用基本CSS样式以及编写核心JavaScript逻辑。

1. HTML 结构准备

首先，我们需要在HTML页面中创建一个基础的表格容器。这个容器将包含表格的头部，并提供一个唯一的ID，以便JavaScript能够准确地找到并操作它。我们还会添加一个按钮，用于触发表格的生成。

在上述HTML代码中：

我们创建了一个带有id="generateTableBtn"的按钮，用户点击它将触发表格的生成。

id="fruits-table"的元素是我们的目标容器。

和、标签是我们将动态插入数据行的地方，这有助于保持表格结构的语义化。

2. CSS 样式（可选但推荐）

为了让表格在视觉上更清晰，我们可以添加一些基本的CSS样式。这些样式将为表格、单元格和表头添加边框，并居中对齐文本。

创建一个style.css文件：

body {
    font-family: Arial, sans-serif;
    margin: 20px;
}

h1 {
    color: #333;
}

button {
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    margin-bottom: 20px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
}

button:hover {
    background-color: #0056b3;
}

table {
    width: 100%;
    border-collapse: collapse; /* 合并边框 */
    margin-top: 20px;
}

table,
td,
th {
    border: 1px solid #777; /* 设置边框 */
    text-align: center; /* 文本居中 */
    padding: 8px; /* 单元格内边距 */
}

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

3. JavaScript 核心逻辑

现在，我们来编写核心的JavaScript代码，它将负责从数组中读取数据，并将其动态地插入到HTML表格中。

创建一个script.js文件：

// 1. 定义数据数组
const fruits = ['apple', 'orange', 'grape', 'banana', 'guava', 'watermelon', 'mango'];

// 2. 获取HTML元素
const generateTableBtn = document.getElementById('generateTableBtn');
const tableBody = document.querySelector('#fruits-table tbody'); // 获取表格的tbody

// 3. 定义生成表格数据的函数
function populateFruitsTable() {
    // 清空现有表格内容，防止重复添加
    tableBody.innerHTML = ''; 

    // 遍历水果数组，为每个水果创建一行
    fruits.forEach((fruit, index) => {
        // 创建表格行 (

) const tr = document.createElement('tr'); // 创建索引单元格 (元素。我们将把所有动态生成的行插入到这个中，而不是直接插入到

定义了表格的列头，这部分通常是静态的。
) const indexTd = document.createElement('td'); indexTd.innerText = index + 1; // 显示从1开始的索引 // 创建水果名称单元格 (	) const fruitTd = document.createElement('td'); fruitTd.innerText = fruit; // 将单元格添加到行中 tr.appendChild(indexTd); tr.appendChild(fruitTd); // 将行添加到表格的tbody中 tableBody.appendChild(tr); }); } // 4. 为按钮添加事件监听器，当点击时调用 populateFruitsTable 函数 generateTableBtn.addEventListener('click', populateFruitsTable); // (可选) 页面加载时自动生成表格 // document.addEventListener('DOMContentLoaded', populateFruitsTable); 代码解析：数据数组 (fruits): 这是一个简单的字符串数组，包含了我们要展示的水果名称。获取HTML元素: generateTableBtn: 获取触发表格生成的按钮元素。 tableBody: 获取ID为fruits-table的表格内的

定义了表格的列头，这部分通常是静态的。

) const indexTd = document.createElement('td'); indexTd.innerText = index + 1; // 显示从1开始的索引 // 创建水果名称单元格 (

) const fruitTd = document.createElement('td'); fruitTd.innerText = fruit; // 将单元格添加到行中 tr.appendChild(indexTd); tr.appendChild(fruitTd); // 将行添加到表格的tbody中 tableBody.appendChild(tr); }); } // 4. 为按钮添加事件监听器，当点击时调用 populateFruitsTable 函数 generateTableBtn.addEventListener('click', populateFruitsTable); // (可选) 页面加载时自动生成表格 // document.addEventListener('DOMContentLoaded', populateFruitsTable);

代码解析：

数据数组 (fruits): 这是一个简单的字符串数组，包含了我们要展示的水果名称。
获取HTML元素:
- generateTableBtn: 获取触发表格生成的按钮元素。
- tableBody: 获取ID为fruits-table的表格内的

，这更符合HTML语义。

populateFruitsTable() 函数:

tableBody.innerHTML = '';: 在每次生成表格前，我们首先清空

的内容。这确保了如果用户多次点击按钮，表格不会重复添加数据。

fruits.forEach((fruit, index) => { ... });: 使用forEach方法遍历fruits数组。对于数组中的每个元素，回调函数都会被执行，并接收到当前元素的值 (fruit) 和它的索引 (index)。

document.createElement('tr'): 创建一个新的

（表格行）元素。

document.createElement('td'): 创建两个新的

元素中。

tableBody.appendChild(tr);: 最后，将完整的

元素（包含其元素中，从而在页面上显示出来。

事件监听器:

generateTableBtn.addEventListener('click', populateFruitsTable);: 为“生成水果表格”按钮添加一个点击事件监听器。当按钮被点击时，populateFruitsTable函数就会被执行，从而动态生成表格。

4. 完整代码示例

将上述HTML、CSS和JavaScript代码分别保存到index.html、style.css和script.js文件中，并在浏览器中打开index.html，点击按钮即可看到效果。

index.html




    
    
    动态生成表格
    


    水果列表

（表格数据单元格）元素，一个用于索引，一个用于水果名称。 indexTd.innerText = index + 1;: 将数组索引加1作为单元格的文本内容，使其从1开始计数，更符合用户习惯。 fruitTd.innerText = fruit;: 将当前水果名称作为另一个单元格的文本内容。 tr.appendChild(indexTd); tr.appendChild(fruitTd);: 将创建的两个	元素添加到
子元素）添加到之前获取到的

索引	水果名称

style.css

body {
    font-family: Arial, sans-serif;
    margin: 20px;
}

h1 {
    color: #333;
}

button {
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    margin-bottom: 20px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
}

button:hover {
    background-color: #0056b3;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

table,
td,
th {
    border: 1px solid #777;
    text-align: center;
    padding: 8px;
}

th {
    background-color: #f2f2f2;
}

script.js

const fruits = ['apple', 'orange', 'grape', 'banana', 'guava', 'watermelon', 'mango'];

const generateTableBtn = document.getElementById('generateTableBtn');
const tableBody = document.querySelector('#fruits-table tbody');

function populateFruitsTable() {
    tableBody.innerHTML = ''; 

    fruits.forEach((fruit, index) => {
        const tr = document.createElement('tr');

        const indexTd = document.createElement('td');
        indexTd.innerText = index + 1; 

        const fruitTd = document.createElement('td');
        fruitTd.innerText = fruit;

        tr.appendChild(indexTd);
        tr.appendChild(fruitTd);

        tableBody.appendChild(tr);
    });
}

generateTableBtn.addEventListener('click', populateFruitsTable);

5. 注意事项与扩展

性能优化: 对于包含大量数据的数组（例如，数千行），频繁地操作DOM可能会影响性能。在这种情况下，可以考虑以下优化策略：
- 使用 DocumentFragment: 先将所有新创建的行添加到DocumentFragment中，然后一次性将DocumentFragment添加到中。这样可以减少DOM重绘和回流的次数。
- 构建HTML字符串: 将所有行和单元格作为HTML字符串拼接起来，然后一次性设置tableBody.innerHTML。这种方法通常更快，但需要注意字符串拼接的安全性（防止XSS攻击）。
数据结构: 本教程使用了一个简单的字符串数组。如果您的数据是对象数组（例如 [{name: 'apple', color: 'red'}, ...]），您可以根据对象的属性来填充不同的单元格。
错误处理: 在实际应用中，您可能需要检查generateTableBtn或tableBody是否成功获取到元素，以避免在元素不存在时抛出错误。
可访问性 (Accessibility): 确保您的表格在语义上正确，并考虑为屏幕阅读器提供必要的aria属性，尤其是在表格内容复杂时。

总结

通过本教程，您已经掌握了如何使用JavaScript动态地创建HTML表格并填充数组数据。核心在于利用DOM操作方法（如document.createElement()、appendChild()和innerText）来构建和修改页面元素。这种技术是前端开发中展示列表数据的基础，理解并熟练运用它将极大地提升您构建动态Web应用的能力。

好了，本文到此结束，带大家了解了《JavaScript动态生成表格并填充数组数据》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！