JS动态表格构建与API数据过滤技巧
时间：2025-11-11 16:45:51 251浏览 收藏
本教程旨在指导开发者使用JavaScript高效构建可搜索的动态数据表格。通过从API获取数据并存储至全局变量，利用数组`filter()`方法结合用户输入实现数据筛选，并实时更新HTML表格，打造响应式数据查询体验。文章将详细讲解如何使用纯JavaScript，结合API数据与HTML表格，实现高效友好的搜索功能。核心内容包括：API数据获取与全局存储、HTML结构搭建（搜索框与数据表格）、数据过滤与动态显示，以及搜索事件绑定。此外，还探讨了大小写不敏感匹配的替代方案、实时搜索实现、性能优化（防抖/节流）及用户体验增强策略，助你构建更完善的数据展示应用。
本教程将指导您如何利用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表格来展示数据。
<!-- 搜索框与搜索按钮 -->
<input type="text" id="myInput" placeholder=" 搜索国家 ">
<input type="submit" id="mySubmit" value="搜索" class="submit">
<!-- 数据表格 -->
<table class="table">
<thead>
<tr>
<th scope="col">国家</th>
<th scope="col">新增确诊</th>
<th scope="col">累计确诊</th>
<th scope="col">新增死亡</th>
<th scope="col">累计死亡</th>
<th scope="col">新增治愈</th>
<th scope="col">累计治愈</th>
<th scope="col">最后更新时间</th>
</tr>
</thead>
<tbody id="tbody">
<!-- 数据将动态加载到这里 -->
</tbody>
</table>注意： 确保搜索按钮有一个唯一的 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 += `<tr>
<td>${result.Country}</td>
<td>${result.NewConfirmed}</td>
<td>${result.TotalConfirmed}</td>
<td>${result.NewDeaths}</td>
<td>${result.TotalDeaths}</td>
<td>${result.NewRecovered}</td>
<td>${result.TotalRecovered}</td>
<td>${new Date(result.Date).toLocaleString()}</td>
</tr>`;
});
// 如果没有搜索结果，可以显示提示信息
if (filteredCountries.length === 0 && searchTerm !== "") {
tbody.innerHTML = `<tr><td colspan="8" style="text-align: center;">未找到匹配 "${searchTerm}" 的国家。</td></tr>`;
}
}在这个函数中，我们首先清空
的内容，然后使用 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):
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>可搜索的动态数据表格</title>
<style>
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; }
</style>
</head>
<body>
<h1>全球疫情数据查询</h1>
<!-- 搜索框与搜索按钮 -->
<input type="text" id="myInput" placeholder=" 搜索国家 ">
<input type="submit" id="mySubmit" value="搜索" class="submit">
<!-- 数据表格 -->
<table class="table">
<thead>
<tr>
<th scope="col">国家</th>
<th scope="col">新增确诊</th>
<th scope="col">累计确诊</th>
<th scope="col">新增死亡</th>
<th scope="col">累计死亡</th>
<th scope="col">新增治愈</th>
<th scope="col">累计治愈</th>
<th scope="col">最后更新时间</th>
</tr>
</thead>
<tbody id="tbody">
<!-- 数据将动态加载到这里 -->
</tbody>
</table>
<script src="app.js"></script>
</body>
</html>JavaScript (app.js):
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 = `<tr><td colspan="8" style="text-align: center; color: red;">数据加载失败，请稍后再试。</td></tr>`;
}
}
/**
* 根据关键词过滤并显示国家数据
* @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 += `<tr>
<td>${result.Country}</td>
<td>${result.NewConfirmed}</td>
<td>${result.TotalConfirmed}</td>
<td>${result.NewDeaths}</td>
<td>${result.TotalDeaths}</td>
<td>${result.NewRecovered}</td>
<td>${result.TotalRecovered}</td>
<td>${new Date(result.Date).toLocaleString()}</td>
</tr>`;
});
} else {
// 如果没有搜索结果，可以显示提示信息
tbody.innerHTML = `<tr><td colspan="8" style="text-align: center;">未找到匹配 "${searchTerm}" 的国家。</td></tr>`;
}
}
// 页面加载时调用，获取并显示数据
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应用。
终于介绍完啦！小伙伴们，这篇关于《JS动态表格构建与API数据过滤技巧》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！
-
502 收藏
-
501 收藏
-
501 收藏
-
501 收藏
-
501 收藏
-
274 收藏
-
232 收藏
-
339 收藏
-
359 收藏
-
342 收藏
-
385 收藏
-
192 收藏
-
360 收藏
-
149 收藏
-
477 收藏
-
313 收藏
-
169 收藏
-
- 前端进阶之JavaScript设计模式
- 设计模式是开发人员在软件开发过程中面临一般问题时的解决方案，代表了最佳的实践。本课程的主打内容包括JS常见设计模式以及具体应用场景，打造一站式知识长龙服务，适合有JS基础的同学学习。
- 立即学习 543次学习
-
- GO语言核心编程课程
- 本课程采用真实案例，全面具体可落地，从理论到实践，一步一步将GO核心编程技术、编程思想、底层实现融会贯通，使学习者贴近时代脉搏，做IT互联网时代的弄潮儿。
- 立即学习 516次学习
-
- 简单聊聊mysql8与网络通信
- 如有问题加微信：Le-studyg；在课程中，我们将首先介绍MySQL8的新特性，包括性能优化、安全增强、新数据类型等，帮助学生快速熟悉MySQL8的最新功能。接着，我们将深入解析MySQL的网络通信机制，包括协议、连接管理、数据传输等，让
- 立即学习 500次学习
-
- JavaScript正则表达式基础与实战
- 在任何一门编程语言中,正则表达式,都是一项重要的知识,它提供了高效的字符串匹配与捕获机制,可以极大的简化程序设计。
- 立即学习 487次学习
-
- 从零制作响应式网站—Grid布局
- 本系列教程将展示从零制作一个假想的网络科技公司官网，分为导航，轮播，关于我们，成功案例，服务流程，团队介绍，数据部分，公司动态，底部信息等内容区块。网站整体采用CSSGrid布局，支持响应式，有流畅过渡和展现动画。
- 立即学习 485次学习