jquery控制table过滤,重新隔行变色
2012-05-28 17:07
239 查看
View Code
<!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>
相关文章推荐
- jquery控制table中的input样式,巧妙利用标签元素,隐藏input边框
- Jquery实现table偶行变色
- Jquery之table中根据行选中,进行背景变色和radio选中
- jQuery实现table表格隔行换色鼠标经过变色
- jquery 控制 table的margin-top属性
- jQuery之四:Table过滤
- jQuery控制Table
- jquery 中的table sort控制
- jQuery_review之table中根据行选中,进行背景变色和checkbox选中
- jquery 写得不错的table鼠标经过变色
- JQuery - 鼠标经过table的行变色
- jquery实现table鼠标经过变色代码
- jquery each控制checkbox有关内容(table tr)的显示或隐藏(jquery 按条件隐藏显示已输出内容)
- div li隔行变色 鼠标悬浮高亮显示 jquery控制css样式
- 表格隔行变色_jQuery控制实现鼠标悬停高亮
- table中嵌套table,如何用jquery来控制奇偶行颜色
- jQuery实现table表格隔行换色鼠标经过变色
- jquery 实现鼠标移动到table每行,此行高亮变色
- 写得不错的jquery table鼠标经过变色代码
- jquery 控制html页面表格当中奇偶行颜色不同 鼠标悬停变色