运城市盐湖区信雨科技有限公司
首页 > 营销学院 > 技术知识

如何使用J*aScript实现动态数据表格的搜索与过滤功能

如何使用JavaScript实现动态数据表格的搜索与过滤功能

本教程将详细介绍如何通过j*ascript实现动态数据表格的搜索和过滤功能。我们将从api获取数据，将其存储在全局变量中，并利用数组的`filter()`方法根据用户输入进行实时或点击搜索，最终将匹配的数据呈现在html表格中。文章将涵盖数据获取、dom操作、事件监听以及代码结构优化等关键技术，旨在帮助开发者构建高效且用户友好的数据展示界面。

在现代Web应用中，从API获取大量数据并以可搜索、可过滤的表格形式展示给用户是一种常见需求。本教程将引导您完成这一过程，重点讲解如何利用J*aScript实现前端的数据搜索与动态渲染。

1. 构建基础HTML结构

首先，我们需要一个HTML骨架来承载搜索输入框、搜索按钮和数据表格。表格应包含一个tbody元素，用于动态填充数据。

<!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: Arial, sans-serif; margin: 20px; }
        input[type="text"], input[type="submit"] { padding: 8px; margin-right: 5px; border: 1px solid #ccc; border-radius: 4px; }
        input[type="submit"] { background-color: #007bff; color: white; cursor: pointer; }
        input[type="submit"]:hover { background-color: #0056b3; }
        table { width: 100%; border-collapse: collapse; margin-top: 20px; }
        th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }
        th { background-color: #f2f2f2; }
    </style>
</head>
<body>

    <!-- 搜索框与搜索按钮 -->
    <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> <!-- 引入J*aScript文件 -->
</body>
</html>

请注意，搜索输入框和搜索按钮分别具有id="myInput"和id="mySubmit"，表格的tbody具有id="tbody"。这些ID将用于J*aScript中获取对应的DOM元素。

2. J*aScript核心逻辑：数据获取与管理

为了实现搜索功能，我们需要将从API获取的原始数据存储在一个全局变量中，以便后续进行过滤操作，而无需每次搜索都重新请求API。

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 += `<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>${result.Date}</td>
    </tr>`;
  });
}
  • 清空表格内容: tbody.innerHTML = ``; 这一步非常关键，它确保每次重新渲染时，旧的数据都会被移除，只显示最新的过滤结果。
  • Array.prototype.filter(): 这是J*aScript数组的一个高阶函数，它创建一个新数组，其中包含通过所提供函数实现的测试的所有元素。
  • 不区分大小写的模糊匹配: country.Country.toLowerCase().includes(c.toLowerCase()) 是实现不区分大小写模糊匹配的关键。它将国家名称和搜索字符串都转换为小写，然后检查国家名称是否包含搜索字符串。

4. 集成搜索功能

最后一步是为搜索按钮添加事件监听器，以便在用户点击“搜索”时触发数据过滤和渲染。

// 为搜索按钮添加点击事件监听器
document.querySelector("#mySubmit").addEventListener("click", e => {
  const searchTerm = document.querySelector("#myInput").value;
  _DisplayCountries(searchTerm); // 调用显示函数并传入搜索框的值
});

当用户点击搜索按钮时，我们将获取输入框中的值，并将其作为参数传递给_DisplayCountries函数，从而实现数据的过滤和显示。

动态WEB网站中的PHP和MySQL：直观的QuickPro指南第2版 动态WEB网站中的PHP和MySQL：直观的QuickPro指南第2版

动态WEB网站中的PHP和MySQL详细反映实际程序的需求，仔细地探讨外部数据的验证(例如信用卡卡号的格式)、用户登录以及如何使用模板建立网页的标准外观。动态WEB网站中的PHP和MySQL的内容不仅仅是这些。书中还提到如何串联J*aScript与PHP让用户操作时更快、更方便。还有正确处理用户输入错误的方法，让网站看起来更专业。另外还引入大量来自PEAR*函数库的强大功能，对常用的、强大的包

动态WEB网站中的PHP和MySQL：直观的QuickPro指南第2版 508 查看详情 动态WEB网站中的PHP和MySQL：直观的QuickPro指南第2版

5. 完整代码示例

将上述HTML和J*aScript代码整合后，您将得到一个功能完整的动态数据搜索与过滤应用。

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: Arial, sans-serif; margin: 20px; }
        input[type="text"], input[type="submit"] { padding: 8px; margin-right: 5px; border: 1px solid #ccc; border-radius: 4px; }
        input[type="submit"] { background-color: #007bff; color: white; cursor: pointer; }
        input[type="submit"]:hover { background-color: #0056b3; }
        table { width: 100%; border-collapse: collapse; margin-top: 20px; }
        th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }
        th { background-color: #f2f2f2; }
    </style>
</head>
<body>

    <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>

J*aScript (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 += `<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>${result.Date}</td>
    </tr>`;
  });
}

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); // 假设也搜索确诊人数
});

总结

通过本教程，您应该已经掌握了使用J*aScript实现动态数据表格搜索与过滤的核心技术。关键在于将数据与视图分离，将获取到的原始数据存储在内存中，然后通过Array.prototype.filter()方法根据用户输入进行高效过滤，并动态更新HTML表格。模块化的函数设计、对性能和用户体验的考量，以及对更高级过滤方法的理解，将帮助您构建更加健壮和高效的Web应用。

以上就是如何使用J*aScript实现动态数据表格的搜索与过滤功能的详细内容，更多请关注其它相关文章！


# java  # 流量高的营销号推广平台  # 城市核心豪宅营销推广  # seo关键词排名优化软  # 南山定制型网站建设推广  # 伊人seo  # 网易云课堂seo  # 正规seo优化需求  # 兰州seo翰文  # 贵阳地产网站推广  # 首次  # 搜索功能  # 更新时间  # 创建一个  # 加载  # 如何使用  # 全局变量  # 清空  # 回调  # 点击事件  # 数据搜索  # ai  # 回调函数  # app  # 正则表达式  # json  # 前端  # js  # html  # javascript  # 长沙网站建设客户在哪 


相关栏目： 【 Google疑问12 】 【 Facebook疑问10 】 【 优化推广96088 】 【 技术知识133117 】 【 IDC资讯59369 】 【 网络运营7196 】 【 IT资讯61894 】


相关推荐： 智学网app怎么登录忘记密码_智学网app忘记密码找回与重新登录操作方法  Composer reinstall命令重装损坏的包  《梦想世界：长风问剑录》药师一图流分享  在Flask应用中安全高效地更新SQLAlchemy用户数据  驱动人生：游戏修复指南  《糖豆》添加舞曲方法  oppo手机如何通过下拉通知栏截图_oppo手机通知栏快捷截图方法  《偃武》甘宁技能详解  《搜书吧》阅读书籍方法  金牛福袋获取攻略  Win10锁屏时间怎么设置 Win10调整自动锁屏时间方法  优酷官网登录入口电脑版 优酷官网网址入口  解决C#跨线程访问XML对象的异常 安全的并发XML处理模式  QQ网页版入口导航 QQ网页版在线访问通道  Win10怎么设置快速启动 Win10开启快速启动设置方法  火狐浏览器如何刷新修复浏览器 火狐浏览器“重置Firefox”功能详解  个人所得税办理入口 个人所得税综合所得年度汇算入口  京东快递包裹信息查询入口 京东快递官方查询平台入口  Python测试中模块导入路径解析的最佳实践  mysql中如何配置字符集和排序规则_mysql字符集排序配置  《海豚家》注销账号方法  微信如何设置字体大小_微信字体设置的阅读舒适  钉钉任务无法提醒如何处理 钉钉任务提醒优化方法  139邮箱登录入口官网 139邮箱登录入口官网网址  《虎扑》关闭社区内容推荐方法  作业帮网页版不用下载入口 在线问老师快速答疑  抖音团长模式怎么做?团长模式是什么意思？  Win10截图远程协助 Win10远程桌面截屏法【场景应用】  智慧职教mooc平台登录网址 智慧职教mooc官网直达  《环球网校》设置报考省市方法  J*aScript桌面应用_Electron多进程架构实战  《大润发优鲜》充值方法介绍  Golang如何操作指针参数_Go pointer参数传递规则  暴风影音官网正式版_暴风影音手机版官网下载安卓  Lar*el Socialite单设备登录策略：实现用户唯一会话管理  TikTok收藏夹无法删除视频如何解决 TikTok收藏管理优化方法  iPhone16Plus参数配置如何调整声音_iPhone16Plus参数配置声音调整详细方法  《跳跳舞蹈》循环播放方法  如何在CSS中清除浮动解决背景颜色不包裹内容问题_clear after技巧  ToDesk远程摄像头功能使用方法_ToDesk远程视频画面查看设置教程  繁花漫画使用教程  快手极速版在线体验区 快手极速版网页体验入口  Lar*el怎么实现全文搜索_Lar*el Scout集成Algolia教程  纯CSS实现滚动时动态时间轴线条颜色填充效果  Lar*el Dusk 测试中管理浏览器权限：以剪贴板访问为例  CSS绝对定位与溢出控制：实现背景元素局部显示不触发滚动条  mysql离线安装后如何启动_mysql离线安装完成后启动服务的方法  PDF文件去水印平台入口 PDF水印删除网址  如何解决Casbin日志与应用日志不统一的问题，使用casbin/psr3-bridge实现无缝集成  深入理解随机递归函数的确定性：内部节点、叶节点与时间复杂度分析 

 2025-11-15

了解您产品搜索量及市场趋势，制定营销计划

同行竞争及网站分析保障您的广告效果

点击免费数据支持

提交您的需求，1小时内享受我们的专业解答。

运城市盐湖区信雨科技有限公司

运城市盐湖区信雨科技有限公司

运城市盐湖区信雨科技有限公司是一家深耕海外推广领域十年的专业服务商，作为谷歌推广与Facebook广告全球合作伙伴，聚焦外贸企业出海痛点，以数字化营销为核心，提供一站式海外营销解决方案。公司凭借十年行业沉淀与平台官方资源加持，打破传统外贸获客壁垒，助力企业高效开拓全球市场，成为中小企业出海的可靠合作伙伴。

4008744355

 8156699

 13765294890

 8156699@qq.com

服务/方案/案例/支持

产品服务
Google推广
社交推广
网站建设
Bing 推广
Yandex推广
解决方案
B2B网站推广
B2C电商推广
海外品牌推广
APP海外推广
营销案例
品牌营销推广
B2C电商推广
B2B海外推广
APP应用游戏
营销网站案例
营销学院
Google疑问
Facebook疑问
优化推广
技术知识
IDC资讯
网络运营
IT资讯

关于我们

公司简介
报名培训
加入我们

©  运城市盐湖区信雨科技有限公司 版权所有 晋ICP备2025069848号 

Notice

We and selected third parties use cookies or similar technologies for technical purposes and, with your consent, for other purposes as specified in the cookie policy.
You can consent to the use of such technologies by closing this notice, by interacting with any link or button outside of this notice or by continuing to browse otherwise.