【问题标题】:jquery result live filter working with table使用表的 jquery 结果实时过滤器
【发布时间】:2013-05-13 10:24:48
【问题描述】:

首先我必须承认我对 JS 或 Jquery 真的很不好,这很重要。我搜索了可以帮助我使用 jquery 过滤结果的代码。代码如下:

$(document).ready(function(){
    $("#filter").keyup(function(){  
        // Retrieve the input field text and reset the count to zero        
        var filter = $(this).val(), count = 0;         
        // Loop through the comment list      
        $(".commentlist li").each(function(){           
            // If the list item does not contain the text phrase fade it out    
            if ($(this).text().search(new RegExp(filter, "i")) < 0) {     
                $(this).fadeOut();  
                // Show the list item if the phrase matches and increase the count by 1
            } else {     
                $(this).show();     
                count++;         
            }        
        });        
        // Update the count     
        var numberItems = count;
        $("#filter-count").text("Number of Comments = " + count);
    });
});

此代码适用于下面列出的无序列表:

  <ol class="commentlist">  <li>Comment #1</li>  <li>Comment #2</li></ol> 

现在这段代码可以很好地处理列表。不过,我的站点中有一个表,每行有 3 条记录。每个记录(单元格)代表用户配置文件。我希望这个精确的搜索功能可以在表格上使用,以便用户可以输入用户名并显示它。这可能吗?

谢谢大家,非常感谢您的支持,

【问题讨论】:

    标签: javascript jquery html


    【解决方案1】:
    <script>
        $(document).ready(function(){
            $("#filter").keyup(function(){  
                // Retrieve the input field text and reset the count to zero        
                var filter = $(this).val(), count = 0;         
                // Loop through the comment list      
                $(".users td").each(function(){           
                    // If the list item does not contain the text phrase fade it out    
                    if ($(this).text().search(new RegExp(filter, "i")) < 0) {     
                        $(this).fadeOut();  
                        // Show the list item if the phrase matches and increase the count by 1
                    } else {     
                        $(this).show();     
                        count++;         
                    }        
                });        
                // Update the count     
                var numberItems = count;
                $("#filter-count").text("msg" + count);
            });
        });
    </script>
    

    【讨论】:

      猜你喜欢
      • 2011-02-17
      • 2019-10-20
      • 1970-01-01
      • 2014-10-23
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2017-11-21
      相关资源
      最近更新 更多