本教程将指导您如何利用javascript实现一个动态数据表格的搜索功能。通过从api获取数据并将其存储在全局变量中，我们能够结合用户输入，使用数组的`filter()`方法高效地筛选出匹配项，并实时更新html表格，从而为用户提供一个响应式且高效的数据查询体验。
在现代Web应用中，动态展示和搜索大量数据是常见的需求。本教程将详细介绍如何使用纯JavaScript，结合API数据和HTML表格，实现一个高效且用户友好的搜索功能。
一、数据获取与全局存储
为了实现高效的搜索功能，避免每次用户搜索时都重新请求API，我们应该在页面加载时一次性获取所有数据，并将其存储在一个全局可访问的变量中。
首先，定义一个全局变量 countriesData 用于存储从API获取的原始国家数据。
let countriesData = []; // 全局变量，用于存储所有国家数据/** * 异步获取API数据 */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(); // 页面加载时调用，获取并显示数据
二、HTML结构：搜索框与数据表格
我们需要一个输入框供用户输入搜索关键词，一个按钮触发搜索，以及一个HTML表格来展示数据。
立即学习“Java免费学习笔记（深入）”；
| 国家 | 新增确诊 | 累计确诊 | 新增死亡 | 累计死亡 | 新增治愈 | 累计治愈 | 最后更新时间 |
|---|
注意： 确保搜索按钮有一个唯一的 id (例如 mySubmit)，以便我们可以在JavaScript中轻松地为其添加事件监听器。
三、实现数据过滤与动态显示
这是实现搜索功能的核心部分。我们将创建一个独立的函数 _DisplayCountries，它负责根据传入的搜索关键词过滤 countriesData，并更新HTML表格。
/** * 根据关键词过滤并显示国家数据 * @param {string} searchTerm - 用户输入的搜索关键词，默认为空字符串 */const _DisplayCountries = (searchTerm = "") => { const tbody = document.querySelector("#tbody"); tbody.innerHTML = ``; // 清空表格当前内容 // 使用filter方法过滤数据 const filteredCountries = countriesData.filter(country => // 将国家名称和搜索关键词都转换为小写，实现大小写不敏感搜索 country.Country.toLowerCase().includes(searchTerm.toLowerCase()) ); // 遍历过滤后的数据，并将其添加到表格中 filteredCountries.forEach(result => { tbody.innerHTML += ` ${result.Country} ${result.NewConfirmed} ${result.TotalConfirmed} ${result.NewDeaths} ${result.TotalDeaths} ${result.NewRecovered} ${result.TotalRecovered} ${new Date(result.Date).toLocaleString()} `; }); // 如果没有搜索结果，可以显示提示信息 if (filteredCountries.length === 0 && searchTerm !== "") { tbody.innerHTML = `未找到匹配 "${searchTerm}" 的国家。
在这个函数中，我们首先清空
的内容，然后使用 Array.prototype.filter() 方法根据 searchTerm 过滤 countriesData 数组。为了实现大小写不敏感的搜索，我们将 country.Country 和 searchTerm 都转换为小写再进行比较。最后，遍历过滤后的结果，并构建相应的表格行。
四、绑定搜索事件
最后一步是监听搜索按钮的点击事件。当用户点击“搜索”按钮时，我们获取输入框中的值，并将其传递给 _DisplayCountries 函数。
document.querySelector("#mySubmit").addEventListener("click", () => { const searchInput = document.querySelector("#myInput"); _DisplayCountries(searchInput.value); // 调用显示函数，传入搜索框的值});
五、完整示例代码
将以上所有JavaScript和HTML代码组合起来，即可实现完整的搜索功能。
HTML (index.html):
可搜索的动态数据表格 body { font-family: sans-serif; margin: 20px; } .table { width: 100%; border-collapse: collapse; margin-top: 20px; } .table th, .table td { border: 1px solid #ddd; padding: 8px; text-align: left; } .table th { background-color: #f2f2f2; } #myInput { padding: 8px; width: 200px; margin-right: 10px; border: 1px solid #ccc; border-radius: 4px;} #mySubmit { padding: 8px 15px; background-color: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer; } #mySubmit:hover { background-color: #0056b3; }全球疫情数据查询
| 国家 | 新增确诊 | 累计确诊 | 新增死亡 | 累计死亡 | 新增治愈 | 累计治愈 | 最后更新时间 |
|---|
let countriesData = []; // 全局变量，用于存储所有国家数据/** * 异步获取API数据 */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 tbody = document.querySelector("#tbody"); tbody.innerHTML = `数据加载失败，请稍后再试。`; }}/** * 根据关键词过滤并显示国家数据 * @param {string} searchTerm - 用户输入的搜索关键词，默认为空字符串 */const _DisplayCountries = (searchTerm = "") => { const tbody = document.querySelector("#tbody"); tbody.innerHTML = ``; // 清空表格当前内容 // 使用filter方法过滤数据 const filteredCountries = countriesData.filter(country => // 将国家名称和搜索关键词都转换为小写，实现大小写不敏感搜索 country.Country.toLowerCase().includes(searchTerm.toLowerCase()) ); // 遍历过滤后的数据，并将其添加到表格中 if (filteredCountries.length > 0) { filteredCountries.forEach(result => { tbody.innerHTML += ` ${result.Country} ${result.NewConfirmed} ${result.TotalConfirmed} ${result.NewDeaths} ${result.TotalDeaths} ${result.NewRecovered} ${result.TotalRecovered} ${new Date(result.Date).toLocaleString()} `; }); } else { // 如果没有搜索结果，可以显示提示信息 tbody.innerHTML = `未找到匹配 "${searchTerm}" 的国家。`; }}// 页面加载时调用，获取并显示数据getdata();// 绑定搜索按钮点击事件document.querySelector("#mySubmit").addEventListener("click", () => { const searchInput = document.querySelector("#myInput"); _DisplayCountries(searchInput.value); // 调用显示函数，传入搜索框的值});
六、优化与扩展
为了提升用户体验和代码的灵活性，我们可以考虑以下优化和扩展：
大小写不敏感匹配的替代方案：除了 toLowerCase().includes()，还可以使用正则表达式进行更灵活的匹配。例如：
const _DisplayCountries = (searchTerm = "") => { const tbody = document.querySelector("#tbody"); tbody.innerHTML = ``; // 创建一个正则表达式，'i' 标志表示不区分大小写 const regex = new RegExp(searchTerm, "i"); const filteredCountries = countriesData.filter(country => country.Country.match(regex) ); // ... 后续渲染逻辑不变}
这种方式在处理更复杂的模式匹配时更为强大。
实时搜索（即时过滤）：将事件监听器从搜索按钮的 click 事件改为搜索输入框的 input 或 keyup 事件，可以在用户输入时立即更新结果，提供更流畅的体验。
document.querySelector("#myInput").addEventListener("input", (e) => { _DisplayCountries(e.target.value);});// 如果改为实时搜索，搜索按钮可以移除或改变其功能// document.querySelector("#mySubmit").removeEventListener("click", ...);
性能考量（防抖/节流）：对于实时搜索，如果数据集非常庞大，频繁触发过滤和DOM操作可能会导致性能问题。此时可以引入防抖（debounce）或节流（throttle）技术，限制函数的执行频率。
防抖： 在一定时间内，如果事件再次触发，则重新计时。只有当事件停止触发一段时间后，才执行函数。适用于搜索框输入。节流： 在一定时间内，函数只执行一次。适用于滚动、窗口调整大小等。
用户体验增强：
加载指示器： 在API请求期间显示一个加载动画或文本，告知用户数据正在加载。空结果提示： 当搜索结果为空时，显示友好的提示信息（已在示例中添加）。排序功能： 允许用户点击表格头对数据进行排序。
错误处理：在 getdata 函数中添加 try…catch 块，可以捕获API请求或解析数据时可能发生的错误，并向用户提供反馈，增强应用的健壮性。
总结
通过本教程，我们学习了如何利用JavaScript实现一个动态数据表格的搜索功能。核心步骤包括：一次性获取并全局存储API数据、构建清晰的HTML结构、使用 Array.prototype.filter() 方法结合大小写不敏感匹配逻辑进行数据过滤，以及将过滤后的数据动态渲染到HTML表格中。通过分离数据获取、过滤和显示逻辑，并考虑事件绑定和性能优化，我们可以构建出高效、响应式且用户体验良好的Web应用。
以上就是构建可搜索的动态表格：JavaScript与API数据过滤教程的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1595247.html
微信扫一扫 
支付宝扫一扫 
