在Web开发中，我们经常需要处理和展示数据。有时，这些数据是真实的，但有时它们可能是假的（例如，为了演示或测试目的）。本文将向您展示如何使用假数据创建一个动态的HTML表格，并使用JavaScript为其添加交互功能。
首先，我们需要一些假数据。在JSON格式中，我们可以创建一个简单的对象，其中包含多个项目，每个项目都有一个ID、名称和类型。以下是一个示例：
{
"items": [
{
"id": 1,
"name": "Item 1",
"type": "Type A"
},
{
"id": 2,
"name": "Item 2",
"type": "Type B"
},
// ... 更多数据
]
}?
接下来，我们需要创建一个HTML表格来显示这些数据。在表格中，我们为每个项目添加一个行（<tr>），其中包含三个单元格（<td>）：一个用于显示ID，一个用于显示名称，另一个用于显示类型。
由于我们希望每页显示10条数据，我们将在JavaScript中实现分页逻辑。同时，我们还将添加一个搜索框、一个重置按钮和两个筛选按钮，以允许用户根据名称和类型筛选数据。
首先，我们需要一个HTML文件来布局表格和按钮。这里是一个简单的HTML模板：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>假数据表格</title>
<link rel="stylesheet" href="styles.css"> <!-- 引入CSS样式表 -->
</head>
<body>
<input type="text" id="search-input" onkeyup="filterTable()" placeholder="搜索名称"> <!-- 搜索框 -->
<button onclick="resetFilter()">重置</button> <!-- 重置按钮 -->
<button onclick="filterByType('Type A')">Type A</button> <!-- 按类型筛选按钮 -->
<button onclick="filterByType('Type B')">Type B</button> <!-- 按类型筛选按钮 -->
<table id="data-table">
<thead>
<tr>
<th>ID</th>
<th>名称</th>
<th>类型</th>
</tr>
</thead>
<tbody id="table-body">
<!-- 数据将在此处动态添加 -->
</tbody>
</table>
<script src="script.js"></script> <!-- 引入JavaScript脚本 -->
</body>
</html>?然后，我们需要一个CSS文件（styles.css）来美化表格和按钮：
/* styles.css */
body {
font-family: Arial, sans-serif;
}
input[type="text"] {
padding: 5px;
width: 200px;
}
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
button {
padding: 8px 16px;
font-size: 16px;
margin-bottom: 10px;
}最后，我们需要一个JavaScript文件（script.js）来处理数据过滤和表格的动态更新：
// script.js
// 假设这是从服务器获取的数据，或者您可以将其替换为从localStorage等获取数据的逻辑
const items = [
{ id: 1, name: 'Item 1', type: 'Type A' },
{ id: 2, name: 'Item 2', type: 'Type B' },
// ... 更多数据项
];
// 初始化表格
function initTable() {
const tableBody = document.getElementById('table-body');
tableBody.innerHTML = ''; // 清空表格内容
items.forEach((item, index) => {
if (index < 10) { // 每页默认显示10条数据
const row = document.createElement('tr');
row.innerHTML = `
<td>${item.id}</td>
<td>${item.name}</td>
<td>${item.type}</td>
`;
tableBody.appendChild(row);
}
});
}
// 根据名称搜索过滤表格
function filterTable() {
const input = document.getElementById('search-input');
const filter = input.value.toUpperCase();
const table = document.getElementById('data-table');
const rows = table.getElementsByTagName('tr');
for (let i = 1; i < rows.length; i++) { // 从第二行开始（跳过表头）
const name = rows[i].getElementsByTagName('td')[1].innerText.toUpperCase();
if (name.indexOf(filter) > -1) {
rows[i].style.display = '';
} else {
rows[i].style.display = 'none';
}
}
}
// 重置表格到初始状态
function resetFilter() {
initTable(); // 重新初始化表格
document.getElementById('search-input').value = ''; // 清空搜索框
}
// 根据通过结合假数据、HTML、CSS和JavaScript，我们可以创建一个功能强大且动态的表格。这个表格可以根据用户的需求进行过滤和排序，提供更好的用户体验。此外，由于我们使用的是假数据，这使得在开发过程中不需要担心数据的完整性和准确性。这种方法对于原型设计、演示或测试非常有用。