本文章摘编、转载需要注明来源 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>