本教程将详细介绍如何通过javascript实现动态数据表格的搜索和过滤功能。我们将从api获取数据，将其存储在全局变量中，并利用数组的`filter()`方法根据用户输入进行实时或点击搜索，最终将匹配的数据呈现在html表格中。文章将涵盖数据获取、dom操作、事件监听以及代码结构优化等关键技术，旨在帮助开发者构建高效且用户友好的数据展示界面。
在现代Web应用中，从API获取大量数据并以可搜索、可过滤的表格形式展示给用户是一种常见需求。本教程将引导您完成这一过程，重点讲解如何利用JavaScript实现前端的数据搜索与动态渲染。
1. 构建基础HTML结构
首先，我们需要一个HTML骨架来承载搜索输入框、搜索按钮和数据表格。表格应包含一个tbody元素，用于动态填充数据。
动态数据搜索与过滤
| 国家 | 新增确诊 | 累计确诊 | 新增死亡 | 累计死亡 | 新增恢复 | 累计恢复 | 最后更新时间 |
|---|
请注意，搜索输入框和搜索按钮分别具有id="myInput"和id="mySubmit"，表格的tbody具有id="tbody"。这些ID将用于JavaScript中获取对应的DOM元素。
2. JavaScript核心逻辑：数据获取与管理
为了实现搜索功能，我们需要将从API获取的原始数据存储在一个全局变量中，以便后续进行过滤操作，而无需每次搜索都重新请求API。
立即学习“Java免费学习笔记（深入）”；
2.1 全局数据存储
定义一个全局变量countriesData来存储所有国家的数据。
// app.js let countriesData = []; // 用于存储从API获取的所有国家数据
2.2 异步获取数据
使用fetch API从指定端点获取数据。async/await语法使得异步操作更加简洁易读。
const getdata = async () => {
const endpoint = "https://api.covid19api.com/summary";
try {
const response = await fetch(endpoint);
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const data = await response.json();
countriesData = data.Countries; // 将获取到的国家数据赋值给全局变量
_DisplayCountries(); // 数据加载完成后，首次显示所有国家
} catch (error) {
console.error("获取数据失败:", error);
// 可以在这里向用户显示错误消息
}
}
// 页面加载时调用数据获取函数
getdata();3. 实现数据动态渲染与过滤
我们将创建一个独立的函数来负责数据的过滤和表格的渲染。这种模块化的设计有助于代码的复用和维护。
3.1 _DisplayCountries 函数详解
这个函数接收一个可选的搜索字符串参数c。如果c为空，则显示所有数据；否则，根据c过滤数据。
const _DisplayCountries = (c = "") => {
let tbody = document.querySelector("#tbody");
tbody.innerHTML = ``; // 每次渲染前清空表格内容
// 根据搜索字符串过滤数据
const filteredCountries = countriesData.filter(country =>
country.Country.toLowerCase().includes(c.toLowerCase())
);
// 遍历过滤后的数据，并添加到表格中
filteredCountries.forEach(result => {
tbody.innerHTML += `
${result.Country}
${result.NewConfirmed}
${result.TotalConfirmed}
${result.NewDeaths}
${result.TotalDeaths}
${result.NewRecovered}
${result.TotalRecovered}
${result.Date}
`;
});
}- 清空表格内容: tbody.innerHTML = ``; 这一步非常关键，它确保每次重新渲染时，旧的数据都会被移除，只显示最新的过滤结果。
- Array.prototype.filter(): 这是JavaScript数组的一个高阶函数，它创建一个新数组，其中包含通过所提供函数实现的测试的所有元素。
- 不区分大小写的模糊匹配: country.Country.toLowerCase().includes(c.toLowerCase()) 是实现不区分大小写模糊匹配的关键。它将国家名称和搜索字符串都转换为小写，然后检查国家名称是否包含搜索字符串。
4. 集成搜索功能
最后一步是为搜索按钮添加事件监听器，以便在用户点击“搜索”时触发数据过滤和渲染。
动态WEB网站中的PHP和MySQL详细反映实际程序的需求，仔细地探讨外部数据的验证(例如信用卡卡号的格式)、用户登录以及如何使用模板建立网页的标准外观。动态WEB网站中的PHP和MySQL的内容不仅仅是这些。书中还提到如何串联JavaScript与PHP让用户操作时更快、更方便。还有正确处理用户输入错误的方法，让网站看起来更专业。另外还引入大量来自PEAR外挂函数库的强大功能，对常用的、强大的包
// 为搜索按钮添加点击事件监听器
document.querySelector("#mySubmit").addEventListener("click", e => {
const searchTerm = document.querySelector("#myInput").value;
_DisplayCountries(searchTerm); // 调用显示函数并传入搜索框的值
});当用户点击搜索按钮时，我们将获取输入框中的值，并将其作为参数传递给_DisplayCountries函数，从而实现数据的过滤和显示。
5. 完整代码示例
将上述HTML和JavaScript代码整合后，您将得到一个功能完整的动态数据搜索与过滤应用。
HTML (index.html)
动态数据搜索与过滤
| 国家 | 新增确诊 | 累计确诊 | 新增死亡 | 累计死亡 | 新增恢复 | 累计恢复 | 最后更新时间 |
|---|
JavaScript (app.js)
let countriesData = [];
const getdata = async () => {
const endpoint = "https://api.covid19api.com/summary";
try {
const response = await fetch(endpoint);
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const data = await response.json();
countriesData = data.Countries;
_DisplayCountries(); // 首次加载时显示所有国家
} catch (error) {
console.error("获取数据失败:", error);
}
}
const _DisplayCountries = (c = "") => {
let tbody = document.querySelector("#tbody");
tbody.innerHTML = ``; // 清空表格内容
const filteredCountries = countriesData.filter(country =>
country.Country.toLowerCase().includes(c.toLowerCase())
);
filteredCountries.forEach(result => {
tbody.innerHTML += `
${result.Country}
${result.NewConfirmed}
${result.TotalConfirmed}
${result.NewDeaths}
${result.TotalDeaths}
${result.NewRecovered}
${result.TotalRecovered}
${result.Date}
`;
});
}
getdata(); // 页面加载时执行数据获取
document.querySelector("#mySubmit").addEventListener("click", e => {
const searchTerm = document.querySelector("#myInput").value;
_DisplayCountries(searchTerm);
});6. 进阶考量与优化
6.1 替代的过滤方法：正则表达式
除了includes()方法，您也可以使用正则表达式进行更灵活的匹配，例如，实现更复杂的模式匹配或只匹配单词开头等。
// 在 _DisplayCountries 函数内部，替换 filter 逻辑
const _DisplayCountries = (c = "") => {
let tbody = document.querySelector("#tbody");
tbody.innerHTML = ``;
// 使用正则表达式进行不区分大小写的匹配
let regex = new RegExp(c, "i"); // "i" 标志表示不区分大小写
const filteredCountries = countriesData.filter(country =>
country.Country.match(regex)
);
filteredCountries.forEach(result => {
// ... 渲染表格行的代码保持不变
});
}RegExp(c, "i")会创建一个正则表达式对象，其中c是搜索字符串，"i"表示忽略大小写。match()方法则用于检查字符串是否匹配该正则表达式。
6.2 性能优化：防抖与节流
如果您的搜索功能是实时触发（例如，用户每输入一个字符就搜索），对于大量数据或频繁操作，可能会导致性能问题。此时可以考虑使用防抖（Debounce）或节流（Throttle）技术。
- 防抖: 在事件触发后，等待一个固定的时间，如果在这段时间内事件再次触发，则重新计时。只有当等待时间内没有再次触发事件时，才执行函数。适用于搜索框输入，避免每次按键都触发搜索。
- 节流: 在一个固定的时间周期内，函数只执行一次。适用于高频事件，如窗口resize或滚动。
6.3 用户体验：清空搜索框的逻辑
当用户清空搜索框时，通常期望表格能重新显示所有数据。目前的实现已经可以做到这一点，因为当c为空字符串时，filter()会返回所有元素。
6.4 错误处理
在getdata函数中，我们已经添加了基本的try-catch块来捕获fetch请求中的网络错误或解析错误。在实际应用中，您可能需要更详细的错误反馈机制，例如在页面上显示友好的错误提示。
6.5 多字段搜索
如果需要搜索多个字段（例如，同时搜索国家名称和确诊人数），可以修改filter回调函数：
const filteredCountries = countriesData.filter(country => {
const searchTermLower = c.toLowerCase();
return country.Country.toLowerCase().includes(searchTermLower) ||
String(country.TotalConfirmed).includes(searchTermLower); // 假设也搜索确诊人数
});总结
通过本教程，您应该已经掌握了使用JavaScript实现动态数据表格搜索与过滤的核心技术。关键在于将数据与视图分离，将获取到的原始数据存储在内存中，然后通过Array.prototype.filter()方法根据用户输入进行高效过滤，并动态更新HTML表格。模块化的函数设计、对性能和用户体验的考量，以及对更高级过滤方法的理解，将帮助您构建更加健壮和高效的Web应用。
