jQuery表格内容过滤

最新推荐文章于 2022-05-22 06:45:00 发布

weixin_30306905

最新推荐文章于 2022-05-22 06:45:00 发布

阅读量222

点赞数

文章标签： javascript xhtml ViewUI

原文链接：http://www.cnblogs.com/sxshijingjing/p/4218276.html

版权

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

转载于:https://www.cnblogs.com/sxshijingjing/p/4218276.html

weixin_30306905

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery表格内容过滤

关于jQuery实现表格内容过滤搜索功能，大概思路上是这样的。在表格上方提供一个搜索框，供用户输入。用户边输入边筛选表格内容，并对匹配中的内容进行着色（我简单的对表格筛选中的内容进行了字体加粗并添加了背景色）。本例子只是一个简单的table布局。而现实项目的例子可能是div布局，所以，本文只是提供一个简单的思路。供读者参考：首先：在文本框上监听一个keyup事件，当用户...
复制链接

扫一扫