一、背景介绍
在Web开发中，我们经常需要处理和展示数据。有时，这些数据是真实的，但有时它们可能是假的（例如，为了演示或测试目的）。本文将向您展示如何使用假数据创建一个动态的HTML表格，并使用JavaScript为其添加交互功能。
二、创建假数据
首先，我们需要一些假数据。在JSON格式中，我们可以创建一个简单的对象，其中包含多个项目，每个项目都有一个ID、名称和类型。以下是一个示例：
{ "items": [ { "id": 1, "name": "Item 1", "type": "Type A" }, { "id": 2, "name": "Item 2", "type": "Type B" }, // ... 更多数据 ] }
三、创建HTML表格
接下来，我们需要创建一个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，我们可以创建一个功能强大且动态的表格。这个表格可以根据用户的需求进行过滤和排序，提供更好的用户体验。此外，由于我们使用的是假数据，这使得在开发过程中不需要担心数据的完整性和准确性。这种方法对于原型设计、演示或测试非常有用。
