jquery控制table过滤,重新隔行变色

2023-06-10 20:09| 来源: 网络整理| 查看: 265

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;}$(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样式 })})过滤: 姓名性别暂住地张山男浙江宁波李四女浙江杭州张山sss男浙江宁波张山男浙江宁波张山男浙江宁波李四女浙江杭州王五男湖南长沙找六男浙江温州 Rain男浙江杭州 MAXMAN女浙江杭州王五fd男湖南长沙找df六男浙江温州 Rain12男浙江杭州 MAXMAN5女浙江杭州

【本文地址】

公司简介

联系我们