JQuery parity for different color display

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

<!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;}  /* The even line style*/

.odd{ background:#FFFFEE;}  /* Odd line style*/

.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");  //Select all rows

$trs.filter(":odd").addClass("odd");  //Add odd style for the odd lines

$trs.filter(":even").addClass("even");//Add odd style for the even line

//Click on the line, add color style

$trs.click(function(e){

$(this).addClass("selected")

.siblings().removeClass("selected");

})

//Real time screening

$("#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");  //Add odd style for the odd lines

$trs.filter(":contains('"+this.value+"'):even").addClass("even");//Add odd style for the even line

})

})

</script>

</head>

<body>

Filter:<input type="text" id="filter"/>

<table>

<thead>

<tr><th>The name </th> <th> < /th> gender; <th> stay</th></tr>

</thead>

<tbody id="trs">

<tr><td>Zhang Shan </td> <td> </td> <td> Zhejiang Ningbo</td></tr>

<tr><td>Li four </td> <td> </td> <td> Zhejiang Hangzhou</td></tr>

<tr><td>Zhang Shan sss</td> <td> </td> <td> Zhejiang Ningbo</td></tr>

<tr><td>Zhang Shan </td> <td> </td> <td> Zhejiang Ningbo</td></tr>

<tr><td>Zhang Shan </td> <td> </td> <td> Zhejiang Ningbo</td></tr>

<tr><td>Li four </td> <td> </td> <td> Zhejiang Hangzhou</td></tr>

<tr><td>Wang five </td> <td> </td> <td> Hunan Changsha</td></tr>

<tr><td>For six </td> <td> </td> <td> Zhejiang Wenzhou</td></tr>

<tr><td>Rain</td><td>Male </td> <td> Zhejiang Hangzhou</td></tr>

<tr><td>MAXMAN</td><td>Female </td> <td> Zhejiang Hangzhou</td></tr>

<tr><td>Wang five fd</td> <td> </td> <td> Hunan Changsha</td></tr>

<tr><td>For DF six </td> <td> </td> <td> Zhejiang Wenzhou</td></tr>

<tr><td>Rain12</td><td>Male </td> <td> Zhejiang Hangzhou</td></tr>

<tr><td>MAXMAN5</td><td>Female </td> <td> Zhejiang Hangzhou</td></tr>

</tbody>

</table>

</body>

</html>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download

Posted by York at November 25, 2013 - 8:10 AM