JavaScript 如何创建动态表格

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

要在JavaScript中创建动态表格，可以按照以下步骤进行：

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

<div id="table-container"></div>

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标记追加到表格容器元素中。例如：

consttableContainer = 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>';
consttableContainer = document.getElementById('table-container');
tableContainer.innerHTML = table;
}
</script>
</body>
</html>

输出

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>';
consttableContainer = document.getElementById('table-container');
tableContainer.innerHTML = table;
} catch (error) {
console.error(error);
}
}

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

输出

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

说明：

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

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