投稿获客
广告
广告 广告 广告
广告 广告 广告 广告
广告 █ 推荐【菠萝云】香港16G内存99元 【CDNCloud】极速、安全可靠的加速体验 广告位联系QQ：253000106 【UStat】免费网站统计平台 SSL证书低至2折 单域名36元起 免费测试！海总一手APK免杀处理 广告位联系QQ：253000106 CDN 服务器 反炸 劫持 域名屏蔽 【UStat】专业网站统计平台 域名注册：海量域名快速注册 安卓免杀 谷歌报毒 封装 苹果签名 广告位联系QQ：253000106 【域名被劫持污染如何处理】 安卓免杀★超级签★封装★谷歌屏蔽 广告位联系QQ：253000106

*本站广告为第三方投放，如发生纠纷，请向本站索取第三方联系方式沟通

  1. 创想鸟首页
  2. 好文分享

使用JavaScript实现表格数据实时搜索过滤功能

程序猿 • • 好文分享 • 阅读 0

使用javascript实现表格数据实时搜索过滤功能

本教程详细介绍了如何利用JavaScript为HTML表格实现实时搜索过滤功能。我们将从构建基础的HTML结构和数据展示开始，逐步讲解两种JavaScript实现方案：传统的`onkeyup`事件处理和现代化的`input`事件结合DOM操作优化。通过实例代码和注意事项，帮助读者掌握无需点击“Enter”键即可动态筛选表格数据的方法，从而提升用户体验。

1. 理解实时搜索的需求与优势

在现代Web应用中，用户期望能够快速、直观地与数据进行交互。当表格数据量较大时，提供一个实时搜索框，允许用户在输入过程中即时看到筛选结果，而非等待按下“Enter”键或点击搜索按钮，能显著提升用户体验。这种“即输即搜”的模式减少了用户的操作步骤，提高了信息获取效率。

本教程将以从后端（例如通过PHP从JSON API）获取数据并展示在HTML表格中为例，重点讲解如何使用纯JavaScript在客户端实现这一实时过滤功能。

2. 构建基础HTML结构与数据展示

首先，我们需要一个HTML页面来承载搜索输入框和数据表格。表格的数据可以预先通过服务器端语言（如PHP）从JSON源加载并渲染到页面上。

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

2.1 HTML结构

我们将创建一个文本输入框作为搜索入口，并一个

元素来显示数据。为了便于JavaScript操作，它们都需要唯一的id属性。

        实时表格搜索过滤             
                    
                Id                Bin                Tür                Banka Adı                Type                Name                Oluşturma Tarihi                Güncelleme Tarihi            
                                                    
                1                123456                信用卡                示例银行A                Credit                张三丰                2023-01-01                2023-01-02            
            
                2                789012                借记卡                示例银行B                Debit                李四光                2023-01-03                2023-01-04            
            
                3                345678                预付卡                示例银行C                Prepaid                王五                2023-01-05                2023-01-06            
            
                4                901234                信用卡                示例银行A                Credit                赵六                2023-01-07                2023-01-08

说明：

id=”myInput”：搜索输入框的唯一标识。id=”myTable”：数据表格的唯一标识。autocomplete=”off”：建议关闭浏览器的自动完成功能，以避免干扰搜索体验。表格中包含了

和

，这是良好的语义化实践，也方便JavaScript进行DOM操作。

2.2 数据填充（PHP示例）

虽然JavaScript负责过滤，但表格数据通常来自后端。以下是一个简化的PHP代码片段，展示如何从JSON URL获取数据并填充到

中。

<?php// 假设这是在你的HTML文件中的某个位置，用于生成内容// $json_url = "https://api.example.com/data"; // 替换为你的实际API地址// $json = file_get_contents($json_url);// $data = json_decode($json, TRUE);// 模拟数据，实际应用中替换为从API获取$data = [    ["id" => 1, "bin" => "123456", "tur" => "信用卡", "banka_adi" => "示例银行A", "type" => "Credit", "name" => "张三丰", "created_at" => "2023-01-01", "updated_at" => "2023-01-02"],    ["id" => 2, "bin" => "789012", "tur" => "借记卡", "banka_adi" => "示例银行B", "type" => "Debit", "name" => "李四光", "created_at" => "2023-01-03", "updated_at" => "2023-01-04"],    ["id" => 3, "bin" => "345678", "tur" => "预付卡", "banka_adi" => "示例银行C", "type" => "Prepaid", "name" => "王五", "created_at" => "2023-01-05", "updated_at" => "2023-01-06"],    ["id" => 4, "bin" => "901234", "tur" => "信用卡", "banka_adi" => "示例银行A", "type" => "Credit", "name" => "赵六", "created_at" => "2023-01-07", "updated_at" => "2023-01-08"]];echo "";foreach($data as $record) {    echo "";    echo "" . htmlspecialchars($record["id"]) . "";    echo "" . htmlspecialchars($record["bin"]) . "";    echo "" . htmlspecialchars($record["tur"]) . "";    echo "" . htmlspecialchars($record["banka_adi"]) . "";    echo "" . htmlspecialchars($record["type"]) . "";    echo "" . htmlspecialchars($record["name"]) . "";    echo "" . htmlspecialchars($record["created_at"]) . "";    echo "" . htmlspecialchars($record["updated_at"]) . "";    echo "";}echo "";?>

注意： PHP代码应在服务器端执行，并将生成的HTML直接输出到浏览器。在实际应用中，您会将其嵌入到您的HTML文件中，或者通过模板引擎来渲染。

3. 核心逻辑：JavaScript实现实时过滤

接下来是实现实时过滤的关键部分。我们将探讨两种JavaScript实现方式：一种是基于传统的onkeyup事件，另一种是更现代、更优化的input事件监听。

3.1 方案一：使用onkeyup事件（传统方式）

这种方法通过监听用户在搜索框中每次按键抬起（onkeyup）时触发一个函数来执行过滤逻辑。

在HTML中，将onkeyup=”myFunction()”添加到input标签：







在script.js文件中，定义myFunction：




// script.jsfunction myFunction() {  var input, filter, table, tr, td, i, txtValue;  // 获取搜索框和其值  input = document.getElementById("myInput");  filter = input.value.toUpperCase(); // 将搜索关键词转为大写，进行不区分大小写的匹配  // 获取表格和所有行  table = document.getElementById("myTable");  tr = table.getElementsByTagName("tr"); // 获取所有行，包括表头  console.log("当前过滤关键词:", filter); // 调试输出  // 遍历表格的所有行  // 注意：通常我们希望跳过表头行（thead），从tbody开始遍历  // 如果你的tr包含了thead的行，需要额外处理，或者直接获取tbody内的tr  for (i = 0; i  -1) {        tr[i].style.display = ""; // 显示行      } else {        tr[i].style.display = "none"; // 隐藏行      }    }  }}






注意事项：


ID大小写： 确保JavaScript中document.getElementById()使用的ID与HTML中定义的ID完全匹配（包括大小写）。表头处理： 原始代码中的tr = table.getElementsByTagName(“tr”)会获取包括

中的行。在遍历时，需要确保只处理

中的数据行。上述代码通过tr[i].getElementsByTagName(“th”).length === 0进行了简单判断。更健壮的做法是直接获取tbody元素，然后遍历其子行。隐藏字符： 确保JavaScript代码中没有隐藏的Unicode字符（如零宽度空格），这可能导致脚本解析错误。


3.2 方案二：使用input事件（现代化与优化）


input事件在input、textarea或contenteditable元素的值发生任何变化时都会触发，包括键盘输入、粘贴、剪切、拖放等，比keyup更全面。同时，我们可以利用更现代的DOM操作方法来简化代码。


在HTML中，移除onkeyup属性：










在script.js文件中，使用addEventListener来监听input事件：




// script.jswindow.addEventListener("load", () => { // 确保DOM完全加载后再执行  const searchInput = document.getElementById("myInput");  const tableBodyRows = document.querySelectorAll("#myTable tbody tr"); // 直接获取tbody内的所有行  searchInput.addEventListener("input", (e) => {    const filter = e.target.value.toUpperCase(); // 获取并转换为大写    tableBodyRows.forEach(row => {      // 假设我们要搜索的是表格的第6列（索引为5，从0开始计数）      const targetCell = row.cells[5]; // 使用row.cells访问td元素集合      if (targetCell) {        const txtValue = targetCell.textContent || targetCell.innerText;        // 如果filter不为空，并且当前单元格内容不包含filter，则隐藏该行        // 否则，显示该行        row.hidden = filter && !txtValue.toUpperCase().includes(filter);      }    });  });});






优点：


更全面的事件触发： input事件覆盖了所有导致输入框值变化的场景。代码简洁： 利用querySelectorAll和forEach简化了循环和DOM选择。row.hidden属性： 直接设置row.hidden = true或false比操作style.display更语义化和简洁。性能： querySelectorAll(“#myTable tbody tr”)直接获取tbody内的行，避免了对thead的额外判断。


4. CSS样式


为了让搜索框和表格看起来更专业，我们可以添加一些CSS样式。


在style.css文件中：




/* style.css */* {  box-sizing: border-box;}body {  font-family: Arial, sans-serif;  padding: 20px;}#myInput {  background-image: url('/css/searchicon.png'); /* 假设有一个搜索图标 */  background-position: 10px 10px;  background-repeat: no-repeat;  width: 100%;  font-size: 16px;  padding: 12px 20px 12px 40px; /* 左侧留出空间放置图标 */  border: 1px solid #ddd;  margin-bottom: 12px;  border-radius: 4px;}#myTable {  border-collapse: collapse; /* 合并边框 */  width: 100%;  border: 1px solid #ddd;  font-size: 18px;}#myTable th,#myTable td {  text-align: left;  padding: 12px;}#myTable tr {  border-bottom: 1px solid #ddd; /* 行之间有分隔线 */}#myTable thead tr.header {  background-color: #f2f2f2;  color: #333;}#myTable tbody tr:hover {  background-color: #f1f1f1; /* 鼠标悬停时改变背景色 */}






5. 注意事项与总结


目标列索引： 在JavaScript代码中，td = tr[i].getElementsByTagName(“td”)[5]; 或 row.cells[5]; 中的数字 5 代表您希望搜索的表格列的索引（从0开始）。请根据您的表格结构调整此值。性能优化： 对于包含成千上万行数据的巨型表格，直接的DOM操作可能会导致性能问题。在这种情况下，可以考虑以下优化：防抖 (Debouncing)： 使用防抖函数限制input事件的触发频率，例如在用户停止输入500ms后才执行搜索。虚拟滚动 (Virtual Scrolling)： 只渲染可见区域的行，大大减少DOM元素的数量。后端搜索： 对于数据量极大的情况，将搜索请求发送到后端处理通常是更优的选择。可访问性： 确保搜索输入框有合适的placeholder和title属性，提升用户体验。错误处理： 在实际项目中，考虑添加对getElementById或querySelectorAll可能返回null或空列表的检查。


通过本教程，您应该已经掌握了使用JavaScript实现表格数据实时搜索过滤功能的核心技术。无论是采用传统的onkeyup方法，还是更现代、简洁的input事件监听，关键在于理解DOM操作和字符串匹配逻辑。选择适合您项目需求和团队规范的方案，即可为您的Web应用带来更流畅、高效的用户体验。


以上就是使用JavaScript实现表格数据实时搜索过滤功能的详细内容，更多请关注php中文网其它相关文章！


                                                        
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。

如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。

发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1332093.html
                        


                        

                        

                            
 赞 (0)

                                                            

                                     打赏                                    
                                                                                    
                                                微信扫一扫
                                                    微信扫一扫                                            
                                                                                                                            
                                                支付宝扫一扫
                                                    支付宝扫一扫                                            
                                                                            
                                

                                                    


                        

                            

                                                                

                                    

                                                                                     0                                         0                                                                            

                                    
                                    

                                        
                                    

                                

                            

                        

                    

                    

    
关于作者
    

        

            程序猿的头像
        

        

            

                

                    程序猿签约作者
                

                

                                    

            

                            
            

                304.5K
                文章
            

                    

                0
                评论
            

                    

                1
                粉丝
            

        

                        
这个人很懒，什么都没有留下～
        

    


                        

                    

                
                

                     上一篇
                    2025年12月12日 18:14:08
                

            

                            

                
                

                    下一篇 
                    2025年12月12日 18:14:27
                

            

            

                                                                

                            
相关推荐
                        

                    


    	

		
发表回复 
登录后才能评论
 
	

		

                

                    

            
    




            

                                                

                                                                                                            

                                        关注微信