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

一、背景介绍

在Web开发中，我们经常需要处理和展示数据。有时，这些数据是真实的，但有时它们可能是假的（例如，为了演示或测试目的）。本文将向您展示如何使用假数据创建一个动态的HTML表格，并使用JavaScript为其添加交互功能。

二、创建假数据

首先，我们需要一些假数据。在JSON格式中，我们可以创建一个简单的对象，其中包含多个项目，每个项目都有一个ID、名称和类型。以下是一个示例：

{  
  "items": [  
    {  
      "id": 1,  
      "name": "Item 1",  
      "type": "Type A"  
    },  
    {  
      "id": 2,  
      "name": "Item 2",  
      "type": "Type B"  
    },  
    // ... 更多数据  
  ]  
}

 

三、创建HTML表格

接下来，我们需要创建一个HTML表格来显示这些数据。在表格中，我们为每个项目添加一个行（），其中包含三个单元格（）：一个用于显示ID，一个用于显示名称，另一个用于显示类型。

由于我们希望每页显示10条数据，我们将在JavaScript中实现分页逻辑。同时，我们还将添加一个搜索框、一个重置按钮和两个筛选按钮，以允许用户根据名称和类型筛选数据。

首先，我们需要一个HTML文件来布局表格和按钮。这里是一个简单的HTML模板：

  
  
  
      
      
      
       
  
  
       
    重置   
    Type A   
    Type B   
    
  
        
  
            
  
                
ID
  
                
名称
  
                
类型
  
            
  
        
  
        
  
              
        
  
    
  
  
       
  

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