• jQuery表格内容过滤


    关于jQuery实现表格内容过滤搜索功能,大概思路上是这样的。

    在表格上方提供一个搜索框,供用户输入。用户边输入边筛选表格内容,并对匹配中的内容进行着色(我简单的对表格筛选中的内容进行了字体加粗并添加了背景色)。

    本例子只是一个简单的table布局。而现实项目的例子可能是div布局,所以,本文只是提供一个简单的思路。供读者参考:

    • 首先:在文本框上监听一个keyup事件,当用户按下按钮时触发。
      1.   获取文本框中的值,对文本框中的值进行去除首尾空格。
      2.   然后,如果文本框中的值是空值时,比如:用户输入backspace。那么就是没有关键字的情况,这时,表格的内容应该完全显示。
    • 然后:当用户输入的关键字不为空时,对table的每一行进行条件筛选。使得匹配的行显示,不匹配的行隐藏掉。
      1.   首先,将table中tbody中的内容全部隐藏。
      2.   对tr的每一行进行过滤,只要tr中有一个单元格的内容包含用户输入的关键字。那么整行tr显示。

      

    关键是怎么过滤呢?我用的是jQuery中的filter()方法:

    关于filter()方法jQuery中是这样描述的:

      

    返回值:jQueryfilter(expr|obj|ele|fn)

    概述

    筛选出与指定表达式匹配的元素集合。

    这个方法用于缩小匹配的范围。用逗号分隔多个表达式

    参数

    exprStringV1.0

    字符串值,包含供匹配当前元素集合的选择器表达式。

    jQuery objectobjectV1.0

    现有的jQuery对象,以匹配当前的元素。

    element ExpressionV1.4

    一个用于匹配元素的DOM元素。

    function(index) FunctionV1.4

    一个函数用来作为测试元素的集合。它接受一个参数index,这是元素在jQuery集合的索引。在函数, this指的是当前的DOM元素。

    w3c中是这样描述的:

    使用过滤函数

    定义和用法

    filter() 方法将匹配元素集合缩减为匹配指定选择器的元素。

    第一种:接收一个字符串值,该字符串是包含供匹配当前元素集合的选择器表达式。


    使用该方法的第二个形式是,通过函数而不是选择器来筛选元素。对于每个元素,如果该函数返回 true,则元素会被包含在已筛选集合中;否则,会排除这个元素。
    如果给定表示 DOM 元素集合的 jQuery 对象,.filter() 方法会用匹配元素的子集构造一个新的 jQuery 对象。所使用的选择器会测试每个元素;所有匹配该选择器的元素都会包含在结果中。

    在本例子中,我给了filter一个函数作为参数;通过上面的描述,我只要让传入filter()函数的参数函数执行完后返回true.那么,返回true的元素就是我们要的显示的数据。

    那么如何通过一系列的运算,返回true呢?我想,大部分人已经想到了,那就是通过寻找tr中每个td的innerHTML来匹配用户输入的文本框的值。

    匹配很简单,我只用了一个stringObject.indexOf()函数,如果stringObject.indexOf()返回值>-1,说明原字符串中存在着要寻找的字符串。

    下一步就是找到后,给找到的字符着色。我用了stringObject.replace()方法。该方法可以接收一个function作为参数,用来对所匹配到的字符进行处理。

    我把匹配的字符外层包裹一个span标签,再重新设置一个span标签父元素的innerHTML的值。在设置span标签的样式。这样就很明显的看出来,我要匹配的字符到底是哪些了。

    但是呢,这样做有一个问题。就是如果我这次匹配不是第一次匹配的话,那原本的td呢会有前面匹配的标记(背景色和字体加粗)。所以,必须要在新匹配元素之前,将上一次的匹配内容去掉。去掉上一次匹配内容和过滤出匹配内容处理方式是一致的。就不赘述了~~

    好了,大致思路说完了,那直接贴上效果图和源码。供大家参考:

    效果图:

    输入关键字后:

    本例子中主要用到的是jQuery的keyup()、each()和filter()方法。除此之外,还用到了javascript的RegExp对象和stringObject.replace()方法

    源码:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title></title>
    <style type="text/css">
    body{
        font: normal 12px Arial;
    }
    table th{
        width: 100px;
        border-bottom: 1px solid;
        text-align:center;
    }
    table .matched{
        font-weight:bolder;
        background-color:lightpink;
    }
    table tr{
        text-align:left;
    }
    </style>
    <script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("#filterName").keyup(function () {
                var keyValue = $(this).val().trim();
                var $input = $(this);
                clearTable();
                if (!keyValue.length) {
                    $("table tbody tr").show();
                    return false;
                };
                $("table tbody tr").hide()
                    .filter(function (index) {
                        var _ = $(this);
                        var f = false;
                        f = (function () {
                            try {
                                $.each(_.children(), function () {
                                    var __ = $(this);
                                    var v = __.html();
                                    var flag = false;
                                    flag = (function () {
                                        try {
                                            $.each(keyValue, function (index, value) {
                                                if (v.indexOf(value) > -1) {//存在
                                                var reg = new RegExp(value,"gi");
                                                v = v.replace(reg,function(word){
                                                    return "<span class='matched'>"+word+"</span>";
                                                });
                                                __.html(v);
                                                    throw (e);
                                                }
                                            });
                                        } catch (e) {
                                            return true;
                                        }
                                    })();
                                    if (flag) throw (e);
                                });
                            } catch (e) {
                                return true;
                            }
                        })();
                        return f;
                    }).show();
            });
            function clearTable(){
                $("table tbody tr").each(function(){
                    $(this).children().each(function(){
                        if($(this).children("span").length > 0){
                            var target = $(this).children("span");
                            target.replaceWith(target.html());
                        }
                    });
                });
            }
        });
    </script>
    </head>
    <body>
    <div>
    <br/>
    筛选:
    <input id="filterName" />
    <br/>
    
    </div>
    
    <table>
        <thead>
            <tr><th>姓名</th><th>性别</th><th>暂住地</th></tr>
        </thead>
        <tbody>
            <tr><td>张山</td><td></td><td>浙江宁波</td></tr>
            <tr><td>李四</td><td></td><td>浙江杭州</td></tr>
            <tr><td>王五</td><td></td><td>湖南长沙</td></tr>
            <tr><td>找六</td><td></td><td>浙江温州</td></tr>
            <tr><td>Rain</td><td></td><td>浙江杭州</td></tr>
            <tr><td>MAXMAN</td><td></td><td>浙江杭州</td></tr>
            <tr><td>王六</td><td></td><td>浙江杭州</td></tr>
            <tr><td>李字</td><td></td><td>浙江杭州</td></tr>
            <tr><td>李四</td><td></td><td>湖南长沙</td></tr>
        </tbody>
    </table>
    </body>
    </html>
  • 相关阅读:
    数字形式转换
    货币转换
    温度转换
    volatile 的可见性,禁止指令重排序,无法保证原子性的理解
    mysql索引的结构的分析
    史上最详细的ORACLE19c安装说明
    Solaris 修改联网代理的设置
    Oracle Drop表并未直接删除 drop table xx purge
    oracle自定义函数创建函数索引
    连线法合并两个有序链表
  • 原文地址:https://www.cnblogs.com/sxshijingjing/p/4218276.html
Copyright © 2020-2023  润新知