从假数据到动态表格：一个简单的JavaScript和HTML示例

2024-01-09 11:22:42

一、背景介绍

在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，我们可以创建一个功能强大且动态的表格。这个表格可以根据用户的需求进行过滤和排序，提供更好的用户体验。此外，由于我们使用的是假数据，这使得在开发过程中不需要担心数据的完整性和准确性。这种方法对于原型设计、演示或测试非常有用。

文章来源:https://blog.csdn.net/geng1025/article/details/135470821
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。