jquery控制table过滤,重新隔行变色
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!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> table{ width:400px; border:1px solid #FFF02F;border-collapse:collapse;} tr{ cursor:pointer;} td{ font:normal 12px/17px Arial;padding:2px;width:100px;} th{ background:#FFF02F; font:bold 12px/17px Arial;text-align:left;padding:4px;border-bottom:1px solid #333;} .even{ background:#FFF38F;} /* 偶数行样式*/ .odd{ background:#FFFFEE;} /* 奇数行样式*/ .selected{ background:#FF6500;color:#fff;} </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function() { var $trs = $("#trs>tr"); //选择所有行 $trs.filter(":odd").addClass("odd"); //给奇数行添加odd样式 $trs.filter(":even").addClass("even");//给偶数行添加odd样式 //点击行,添加变色样式 $trs.click(function(e){ $(this).addClass("selected") .siblings().removeClass("selected"); }) //实时筛选 $("#filter").keyup(function(){ $trs.show(); if(this.value != "") { $trs.hide() .filter(":contains('"+this.value+"')").show(); } $trs.removeClass("odd"); $trs.removeClass("even"); $trs.filter(":contains('"+this.value+"'):odd").addClass("odd"); //给奇数行添加odd样式 $trs.filter(":contains('"+this.value+"'):even").addClass("even");//给偶数行添加odd样式 }) }) </script> </head> <body> 过滤:<input type="text" id="filter"/> <table> <thead> <tr><th>姓名</th><th>性别</th><th>暂住地</th></tr> </thead> <tbody id="trs"> <tr><td>张山</td><td>男</td><td>浙江宁波</td></tr> <tr><td>李四</td><td>女</td><td>浙江杭州</td></tr> <tr><td>张山sss</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>王五</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>王五fd</td><td>男</td><td>湖南长沙</td></tr> <tr><td>找df六</td><td>男</td><td>浙江温州</td></tr> <tr><td>Rain12</td><td>男</td><td>浙江杭州</td></tr> <tr><td>MAXMAN5</td><td>女</td><td>浙江杭州</td></tr> </tbody> </table> </body> </html>
作者:沐雪
文章均系作者原创或翻译,如有错误不妥之处,欢迎各位批评指正。本文版权归作者和博客园共有,如需转载恳请注明。
如果您觉得阅读这篇博客让你有所收获,请点击右下方【推荐】
为之网-热爱软件编程 http://www.weizhi.cc/