ctrl+F

在大量数据的页面上，我们最常用寻找资源的方式就是“Ctrl+F”，这样可以节省好多时间、精力。而jQuery对DOM操作，也可以达到这样的效果；如果有一张表格，里面有上百条数据，你怎样更加精确地获取自己想要的数据呢？下面就让我来给你好好地分析分析！

code

一张表格

<table><trid="thead"><th>姓名</th><th>性别</th><th>年龄</td></tr><tr><td>张三</td><td>男</td><td>22</td></tr><tr><td>李四</td><td>女</td><td>21</td></tr><tr><td>王五</td><td>男</td><td>24</td></tr><tr><td>小文</td><td>女</td><td>18</td></tr><tr><td>阿七</td><td>保密</td><td>30</td></tr></table><div><inputtype="text"id="text"value=""/><inputtype="button"id="button"value="查询"/></div>

jQuery操作

$(function(){$('#button').bind('click',function(){vartext=$('#text').val();//:first可用第一个trid值#thead替换$('tabletr:not(":first")').hide().filter(':contains("'+text+'")').show();});});

说明

1、获得“button”节点的点击事件，因为只能点击我们才能提交数据；

2、获得“text”文本框内容的数据

3、获得“tr”节点，首先将全部的表格隐藏hide()，not(":first")第一行的表头必须显示出来，filter()过滤出内容:contains()为“text”文本框内容的一行，再显示出来；这样二行就实现了一个经典的查询表格功能。