jQuery 数据列表快速查询

来源：互联网发布：淘宝网购物车打不开编辑：程序博客网时间：2024/04/27 17:31

本文章摘编、转载需要注明来源 http://blog.csdn.net/shadowsick/article/details/8881892

我们的table列表一般有多条数据,如何让用户快速看到自己想看到的数据呢,这个时候再查询一次数据很明显效率不够高,我们可以尝试将符合条件的tr记录移动到首行

下面我们来做个小小的demo,估计数据量太大量的时候效果有点慢,具体调优的自行研究

先写个html加个table列表

<body style="color:#999999;"><input type="hidden" value="" id="searchv"/><table><tr><input type="text" id="search" style="width:200px;color:#cccccc;" value="可输入姓名/英文名查询" /> <a href="#" id="sub">查询</a></tr></table><table style="border:solid thin #cccccc"><thead><tr><td align="center" width="15%">序号</td><td align="center" width="15%">姓名</td><td align="center" width="15%">英文名</td><td align="center" width="15%">年龄</td><td align="center" width="15%">操作</td></tr></thead><tbody><tr sel="sel" vl="张三%zhangsan"><td align="center">1</td><td align="center">张三</td><td align="center">zhangsan</td><td align="center">20</td><td align="center">修改 删除</td></tr><tr sel="sel" vl="李四%lisi"><td align="center">2</td><td align="center">李四</td><td align="center">lisi</td><td align="center">21</td><td align="center">修改 删除</td></tr><tr sel="sel" vl="王五%wangwu"><td align="center">3</td><td align="center">王五</td><td align="center">wangwu</td><td align="center">22</td><td align="center">修改 删除</td></tr><tr sel="sel" vl="朱六%zhuliu"><td align="center">4</td><td align="center">朱六</td><td align="center">zhuliu</td><td align="center">23</td><td align="center">修改 删除</td></tr></tbody></table></body>

基本的数据有了,我们就来用jQuery操作下这些记录行吧,先引入jQuery的包,当然你可以不用这个库,只要你用原生的js里找到差不多的方法就可以了

<script type="text/javascript" src="core.js"></script><script type="text/javascript">var tips = "可输入姓名/英文名查询";var clr = "#cccccc";jQuery(function(){jQuery("#search").focus(function(){// 获得焦点情况if(jQuery(this).val() == tips)jQuery(this).val("").css("color","");else if(jQuery(this).val() != "")jQuery(this).css("color","");}).blur(function(){// 失去焦点情况if(jQuery(this).val() == "")jQuery(this).val(tips).css("color",clr);}).keyup(function(){// 按键触发快速查询事件var search = jQuery.trim(jQuery(this).val());if(search == "" || search == tips)return false;if(search != jQuery("#searchv").val()){// 重新排序table的内容jQuery("tr[sel=sel]").each(function(i){var current = jQuery(this).attr("vl");if(current.indexOf(search) != -1){// 获取当前tr的第一行var first = jQuery("tr[sel=sel]:eq(0)");// 防止查询第一个无节点时无法移动if(first.attr("vl") != current){// 把当前tr移动到第一行jQuery(this).insertBefore(first);}}});jQuery("#searchv").val(search);}});});</script>