如何在 JavaScript 中创建动态表格？

2025年3月18日 | 阅读时长 4 分钟

动态表格 是指其行数根据运行时接收到的输入而变化的表格。有些网站或在线程序，例如商业网站，在添加数据或信息时需要动态创建表格。这可以做到，因为 JavaScript 是一种使用动态类型的编程语言。

要在 JavaScript 中创建动态表格，您可以按照以下步骤:

1. 创建一个您想显示表格的HTML 元素。例如，创建一个带有id 属性的div 元素，以便在您的 JavaScript 代码中引用它。

2. 在您的JavaScript 代码中，定义一个您想在表格中显示的数据数组。例如：

const data = [
{ name: 'John', age: 30, email: 'john@example.com' },
{ name: 'Jane', age: 25, email: 'jane@example.com' },
{ name: 'Bob', age: 40, email: 'bob@example.com' }
];

3. 创建一个函数，根据数据数组生成表格HTML 标记。例如：

function generateTable(data) {
let table = '<table>';
table += '<tr><th>Name</th><th>Age</th><th>Email</th></tr>';
data.forEach(item => {
table += `<tr><td>${item.name}</td><td>${item.age}</td><td>${item.email}</td></tr>`;
});
table += '</table>';
return table;
}

4. 调用generateTable 函数并传入数据数组，然后将生成的HTML 标记附加到表格容器元素。例如：

const tableContainer = document.getElementById('table-container');  
tableContainer.innerHTML = generateTable(data);  

5. 可选地，您可以使用CSS样式化表格，使其外观更具吸引力。例如：

table {
border-collapse: collapse;
width: 100%;
}

th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}

th {
background-color: #4CAF50;
color: white;
}

就这样！您现在有了一个可以根据需要使用新数据更新的动态表格。

示例

这是另一个使用用户输入生成动态表的示例。

<!DOCTYPE html>
<html>
<head>
<title>Dynamic Table Example</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}

th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}

th {
background-color: #4CAF50;
color: white;
}
</style>
</head>
<body>
<div>
<label for="rows">Number of Rows:</label>
<input type="number" id="rows" name="rows" value="3">
<label for="cols">Number of Columns:</label>
<input type="number" id="cols" name="cols" value="3">
<button onclick="generateTable()">Generate Table</button>
</div>
<div id="table-container"></div>

<script>
function generateTable() {
const rows = document.getElementById('rows').value;
const cols = document.getElementById('cols').value;
let table = '<table>';
for (let i = 0; i< rows; i++) {
table += '<tr>';
for (let j = 0; j < cols; j++) {
table += `<td>Row ${i + 1}, Column ${j + 1}</td>`;
}
table += '</tr>';
}
table += '</table>';
const tableContainer = document.getElementById('table-container');  
tableContainer.innerHTML = table;  
}
</script>
</body>
</html>

输出

How to create a dynamic table in JavaScript

说明

此代码生成一个输入表单，用户可以在其中指定表格所需的行和列数。当用户单击“生成表格”按钮时，会调用generateTable() 函数。该函数检索用户输入值，生成一个具有指定行和列数的HTML 表格，并将表格插入table-container 元素。

请注意：此示例不像前面的示例那样使用数据数组，而是使用循环动态生成表格内容。您可以根据需要修改循环逻辑以生成不同的表格内容。

示例

这是另一个使用来自外部 API 的数据生成动态表的示例。

<!DOCTYPE html>
<html>
<head>
<title>Dynamic Table Example</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}

th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}

th {
background-color: #4CAF50;
color: white;
}
</style>
</head>
<body>
<div id="table-container"></div>

<script>
async function generateTable() {
try {
const response = await fetch('https://jsonplaceholder.typicode.com/users');
const data = await response.json();
let table = '<table>';
table += '<tr><th>Name</th><th>Email</th><th>Phone</th></tr>';
data.forEach(item => {
table += `<tr><td>${item.name}</td><td>${item.email}</td><td>${item.phone}</td></tr>`;
});
table += '</table>';
const tableContainer = document.getElementById('table-container');  
tableContainer.innerHTML = table;  
} catch (error) {
console.error(error);
}
}

generateTable();
</script>
</body>
</html>

输出

名称	电子邮件	电话
Leanne Graham	[email protected]	1-770-736-8031 x56442
Ervin Howell	[email protected]	010-692-6593 x09125
Clementine Bauch	[email protected]	1-463-123-4447
Patricia Lebsack	[email protected]	493-170-9623 x156
Chelsey Dietrich	[email protected]	(254)954-1289
Mrs. Dennis Schulist	[email protected]	1-477-935-8478 x6430
Kurtis Weissnat	[email protected]	210.067.6132
Nicholas Runolfsdottir V	[email protected]	586.493.6943 x140
Glenna Reichert	[email protected]	(775)976-6794 x41206
Clementina DuBuque	[email protected]	024-648-3804

说明

此代码使用fetch() 方法从外部 API (https://jsonplaceholder.typicode.com/users)检索数据。API 返回一个用户对象数组，该数组用于生成一个包含三列（姓名、电子邮件和电话）的HTML 表格。async/await 语法用于处理fetch() 方法的异步性质。

请注意：在此示例中，generateTable() 函数在页面加载时自动调用，因此无需用户输入即可生成表格。您可以修改 API 端点以检索不同的数据，表格列和内容将相应更新。

下一个主题如何在 JavaScript 中删除类

← 上一个下一个 →

如何在 JavaScript 中创建动态表格？

示例

请注意：此示例不像前面的示例那样使用数据数组，而是使用循环动态生成表格内容。您可以根据需要修改循环逻辑以生成不同的表格内容。

请注意：在此示例中，generateTable() 函数在页面加载时自动调用，因此无需用户输入即可生成表格。您可以修改 API 端点以检索不同的数据，表格列和内容将相应更新。

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

JavaScript 基础

JS 变量和数据类型

JS 控制语句

JavaScript 函数

JavaScript 对象

JS 高级函数

JS Promises & Async/Await

JavaScript DOM

JavaScript JSON 对象

JavaScript 验证

JavaScript Cookies

异常处理

JavaScript 集合

JavaScript 事件

JavaScript OOPs

JavaScript BOM

面试题

选择题

差异

JavaScript Map 方法

JavaScript Handler

JavaScript Number 方法

JavaScript Reflect

JavaScript Symbol

Symbol 属性

JavaScript Math 方法

JavaScript Date 方法

JavaScript DataView

JavaScript Object 方法

JavaScript Set 方法

JavaScript 字符串方法

JavaScript TypedArray 方法

JavaScript WeakMap 方法

JavaScript WeakSet 方法

JavaScript 数组方法

JavaScript RegExp 对象

JavaScript 附加内容

JavaScript 杂项

JavaScript 进阶

问题

Lodash

如何在 JavaScript 中创建动态表格？

示例

请注意：此示例不像前面的示例那样使用数据数组，而是使用循环动态生成表格内容。您可以根据需要修改循环逻辑以生成不同的表格内容。

请注意：在此示例中，generateTable() 函数在页面加载时自动调用，因此无需用户输入即可生成表格。您可以修改 API 端点以检索不同的数据，表格列和内容将相应更新。

相关帖子

使用 JavaScript 遍历数组对象

JavaScript 数值分隔符

Javascript regexp 前瞻

如何成为一名前端开发人员

JavaScript hashchange 事件

JavaScript 仅数字正则表达式

如何使用 JavaScript 选中单选按钮

如何在 html 中添加 JavaScript

HTTP Cookies

Underscore.js _.filter 函数

订阅 Tpoint Tech

联系信息

关注我们

教程