JavaScript 实现动态表格搜索与 API 数据过滤教程-html教程-PHP中文网

JavaScript 实现动态表格搜索与 API 数据过滤教程

本教程详细介绍了如何使用 javascript 在前端实现动态表格数据搜索功能。通过从 api 获取数据并将其存储在全局变量中，我们利用数组的 `filter()` 方法根据用户输入对数据进行实时过滤，并将匹配的结果动态呈现在 html 表格中，从而实现高效、用户友好的数据检索体验。

在现代 Web 应用中，动态展示和搜索大量数据是常见的需求。当数据来源于远程 API 时，有效管理和过滤这些数据以提升用户体验变得尤为重要。本文将指导您如何利用 JavaScript 实现一个客户端的表格数据搜索功能，具体以 COVID-19 国家的统计数据为例，让用户能够通过输入框实时搜索国家名称并显示匹配结果。

核心思路

实现客户端数据搜索的关键在于以下几点：

数据全局存储：从 API 获取的数据应存储在一个全局可访问的变量中，以便在后续的搜索操作中反复使用，而无需每次都重新请求 API。
分离展示逻辑：将数据获取与数据展示/过滤的逻辑分离。创建一个独立的函数来负责渲染表格数据，该函数可以接受一个搜索关键词作为参数。
利用 filter() 方法：JavaScript 数组的 filter() 方法是实现数据过滤的理想选择。它允许我们根据指定条件筛选数组元素，并返回一个包含所有符合条件的新数组。
事件监听：为搜索输入框或搜索按钮添加事件监听器，以便在用户输入或点击时触发数据过滤和表格更新。

HTML 结构准备

首先，我们需要一个包含搜索输入框、搜索按钮以及用于展示数据的 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>
        /* 简单的表格样式，可根据需要自行添加 */
        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }
        th {
            background-color: #f2f2f2;
        }
        input[type="text"], input[type="submit"] {
            padding: 8px;
            margin-right: 5px;
        }
    </style>
</head>
<body>
    <h1>COVID-19 国家数据搜索</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">
            <!-- 数据将通过 JavaScript 动态填充到这里 -->
        </tbody>
    </table>

    <script src="app.js"></script> <!-- 引入您的 JavaScript 文件 -->
</body>
</html>

登录后复制

请注意，搜索按钮现在具有 id="mySubmit"，这将在 JavaScript 中用于事件监听。

立即学习“Java免费学习笔记（深入）”；

JavaScript 实现

接下来，我们将编写 JavaScript 代码来处理数据获取、过滤和表格渲染。

1. 数据获取与全局存储

首先，我们需要一个全局变量来存储从 API 获取的原始国家数据。然后，定义一个异步函数 getdata 来从 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();

登录后复制

2. 数据展示与过滤函数

创建一个名为 _DisplayCountries 的函数，它负责清空表格并根据传入的搜索关键词重新渲染数据。这个函数将被 getdata 调用以进行初始渲染，也会被搜索事件监听器调用以进行过滤后的渲染。

/**
 * 根据搜索关键词显示国家数据
 * @param {string} searchTerm - 搜索关键词，默认为空字符串表示显示所有数据
 */
const _DisplayCountries = (searchTerm = "") => {
  const tbody = document.querySelector("#tbody");
  tbody.innerHTML = ``; // 清空表格内容

  // 过滤数据：将国家名称和搜索关键词都转为小写，进行不区分大小写的包含匹配
  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>${result.Date}</td>
    </tr>`;
  });
};

登录后复制

在这个函数中，filter() 方法是核心。它会遍历 countriesData 数组中的每一个 country 对象，并检查 country.Country 属性（国家名称）在转换为小写后是否包含 searchTerm（搜索关键词）在转换为小写后的内容。这种处理方式确保了搜索是不区分大小写的。

3. 事件监听

最后，我们需要为搜索按钮添加一个点击事件监听器。当用户点击“搜索”按钮时，我们将获取输入框中的值，并将其作为参数传递给 _DisplayCountries 函数。

纳米搜索

纳米搜索：360推出的新一代AI搜索引擎

查看详情

document.querySelector("#mySubmit").addEventListener("click", e => {
  const searchInput = document.querySelector("#myInput").value;
  _DisplayCountries(searchInput); // 调用显示函数，传入搜索关键词
});

登录后复制

完整代码示例 (app.js)

将上述 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);
    // 可以在这里向用户显示错误消息
  }
};

/**
 * 根据搜索关键词显示国家数据
 * @param {string} searchTerm - 搜索关键词，默认为空字符串表示显示所有数据
 */
const _DisplayCountries = (searchTerm = "") => {
  const tbody = document.querySelector("#tbody");
  tbody.innerHTML = ``; // 清空表格内容

  // 过滤数据：将国家名称和搜索关键词都转为小写，进行不区分大小写的包含匹配
  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>${result.Date}</td>
    </tr>`;
  });
};

// 页面加载完成后立即获取并显示数据
getdata();

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

登录后复制

进阶过滤选项

除了使用 includes() 方法进行简单匹配，您还可以使用正则表达式来实现更复杂的过滤逻辑，例如匹配单词的开头、模糊匹配等。

// 使用正则表达式进行不区分大小写的匹配
// let regex = new RegExp(searchTerm, "i"); // "i" 标志表示不区分大小写
// countriesData.filter(country => country.Country.match(regex))

登录后复制

将上述代码替换 _DisplayCountries 函数中的 filter 逻辑，即可实现基于正则表达式的过滤。

注意事项与优化

用户体验优化 (防抖/节流)：如果希望在用户输入时实时搜索（而不是点击按钮），可以将事件监听器从 click 改为 input 事件。但为了避免在用户快速输入时频繁触发搜索导致性能问题，建议结合防抖 (debounce) 或节流 (throttle) 技术。

// 示例：使用简单的防抖函数
const debounce = (func, delay) => {
    let timeout;
    return function(...args) {
        const context = this;
        clearTimeout(timeout);
        timeout = setTimeout(() => func.apply(context, args), delay);
    };
};

document.querySelector("#myInput").addEventListener("input", debounce(e => {
    const searchInput = e.target.value;
    _DisplayCountries(searchInput);
}, 300)); // 300毫秒内没有新输入才触发搜索

登录后复制

DOM 操作优化：在处理大量数据时，频繁地修改 innerHTML 可能会导致性能问题。更优化的做法是使用 DocumentFragment 来构建 DOM 结构，然后一次性添加到 tbody 中。

const fragment = document.createDocumentFragment();
filteredCountries.forEach(result => {
    const tr = document.createElement('tr');
    tr.innerHTML = `
        <td>${result.Country}</td>
        <!-- 其他 td 元素 -->
    `;
    fragment.appendChild(tr);
});
tbody.appendChild(fragment); // 一次性添加

登录后复制