jQuery 动态文字搜索功能

先简单讲一下需求：页面中会列出多行个人信息记录，为方便查找，在顶层增加一个搜索栏，可根据用户姓名查找记录。
如果只想查看代码，可跳过分析过程，文章底部提供了完整的代码。
以下是我的编写过程：
动态页面，多条记录均由forEach生成，结构如下：

<form name="userForm">
    <table style="width:200px;">
        <thead>
            <tr>
                <th>&nbsp;</th>
                <th>&nbsp;</th>
                <th>教师姓名</th>
            </tr>
        </thead>
        <tbody>
            <c:forEach items="${userList}" var="user" varStatus="itStatus">
            <tr>
                <td class="cellBg-gary">${itStatus.index+1}</td>
                <td>
                    <input type="checkbox" name="userId" value="${user.id}"/>
                </td>
                <td>${user.name}</td>
            </tr>
            </c:forEach>
        </tbody>
    </table>
</form>

为了方便调试静态页面，可以先将web项目启动，然后在浏览器中查看源代码，复制form中的代码，另存为一个本地HTML文件。

chrome操作如下：

为了看起来舒服一些，简单的增加一些表格样式：

<style type="text/css">
    table{
        border-collapse:collapse;
        text-align: center;
    }
    table, th, td{
        border: 1px solid black;
    }
</style>

接下来，我们在<thead>中增加一个搜索框：

<tr>
    <th colspan="3">
        <input type="text" id="searchText"/>
        <input type="button" id="searchBtn" value="搜索"/>
    </th>
</tr>

设置一个单击事件的监听：

$(function(){
    $('#searchBtn').on('click', function(){
        alert('search');
    });
});

这里有两个建议：
1、为了避免代码相互影响，尽量明确监听的作用域
2、当你不确定当前的事件触发者时（如：<td><a href="#" οnclick=""</a></td>），可以alert($(this))来确定触发元素
修改后的代码如下：

$(function(){
    $('#userForm').on('click', '#searchBtn', function(){
        alert($(this).val() + ':' + $(this).html());
    });
});

我们可以通过$('#searchText').val()获取文本框中输入的数据，无难度，主要问题是怎么在页面中查找与之匹配的元素：
为了提高效率，尽可能的避免使用each、replace和RegExp()，推荐使用jQuery :contains选择器，具体用法为$("td:contains(str)")

这里遇到了一个问题：contains(str)中的str对象会被理解为字符串"str"，找到的