使用JavaScript动态生成表格可以通过创建HTML元素并将其插入到DOM中来实现。以下是一个简单的示例，展示了如何动态生成一个表格，并插入到页面中。
HTML
首先，创建一个基础的HTML文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dynamic Table Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="table-container"></div>
<script src="script.js"></script>
</body>
</html>
CSS
添加一些简单的样式：
/* styles.css */
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f4f4f4;
}
table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
}
th, td {
padding: 8px 12px;
border: 1px solid #ddd;
text-align: left;
}
th {
background-color: #f4f4f4;
}
JavaScript
编写JavaScript代码来动态生成表格：
// script.js
document.addEventListener('DOMContentLoaded', () => {
const tableContainer = document.getElementById('table-container');
const data = [
{ name: 'John Doe', age: 25, email: 'john@example.com' },
{ name: 'Jane Smith', age: 30, email: 'jane@example.com' },
{ name: 'Emily Johnson', age: 35, email: 'emily@example.com' },
];
const createTable = (data) => {
const table = document.createElement('table');
const thead = document.createElement('thead');
const headerRow = document.createElement('tr');
const headers = ['Name', 'Age', 'Email'];
headers.forEach(headerText => {
const th = document.createElement('th');
th.textContent = headerText;
headerRow.appendChild(th);
});
thead.appendChild(headerRow);
table.appendChild(thead);
const tbody = document.createElement('tbody');
data.forEach(item => {
const row = document.createElement('tr');
Object.values(item).forEach(text => {
const td = document.createElement('td');
td.textContent = text;
row.appendChild(td);
});
tbody.appendChild(row);
});
table.appendChild(tbody);
return table;
};
const table = createTable(data);
tableContainer.appendChild(table);
});
解释
- HTML部分：
- 包含一个
div容器，用于插入生成的表格。 - 加载
script.js，其中包含生成表格的逻辑。
- 包含一个
- CSS部分：
- 定义表格样式，包括单元格的填充、边框和对齐方式。
th单元格的背景色设置为浅灰色。
- JavaScript部分：
- 在DOM内容加载完成后，选择表格容器。
- 定义数据数组，每个对象表示表格的一行。
createTable函数生成表格：- 创建表格元素并生成表头行。
- 为每个表头单元格创建
th元素并设置文本内容。 - 创建表体
tbody并为每个数据项创建行tr。 - 为每个单元格
td创建元素并设置文本内容。
- 调用
createTable函数并将生成的表格添加到表格容器中。
这个示例展示了如何使用JavaScript动态生成表格，并将其插入到网页中。