The effect is as follows:
With jquery, we can easily implement the above effect. The Code is as follows:
Copy codeThe Code is as follows: <Head>
<Title> css Effect of jquery parity rows </title>
<Script src = "http://img.jb51.net/jslib/jquery/jquery.js" type = "text/javascript"> </script>
<Style type = "text/css">
/* Even rows in the table */
. TabEven
{
Background: # 9d8e8b;
}
/* Odd rows in table */
. TabOdd
{
Background: # ffffff;
}
</Style>
<Script type = "text/javascript">
$ (Document). ready (function (){
$ ("# Datalist tr: even"). addClass ("tabEven ");
$ ("# Datalist tr: odd"). addClass ("tabOdd ");
});
</Script>
</Head>
<Body>
<Table id = "datalist">
<Tr> <td> 1st rows </td> </tr>
<Tr> <td> 2nd rows </td> </tr>
<Tr> <td> 3rd rows </td> </tr>
<Tr> <td> 4th rows </td> </tr>
<Tr> <td> 5th rows </td> </tr>
</Table>
</Body>
</Html>
