虽然jquery流行已经很多年了，一直都感觉很难，也没有花时间去学习它，只是偶尔哪天心血来潮了去看一点点，时隔多日又会忘得一干二净。最近用到表格奇偶行不同色，不得不去再看jquery，虽然感觉还是难，但已经不像以前一样无从下手了。做完后不得不来感叹一下jquery真是太牛了，不用自己再写一大堆javascript函数去实现了，简单几句轻松搞定。
先定义好表格的奇偶行样式，如下代码：
body { font-size:12px; } th { color: #FFFFFF; background: #A172AC; } table,table td,table th { padding: 0.5em; margin: 0; border:0; border-spacing:0; } /* odd items 1,3,5,7,... */ table tbody tr.odd, .odd { background: #FBD106; } /* even items 2,4,6,8,... */ table tbody tr.even, .even { background: #E6453B; } /* hovered items */ .odd:hover, .even:hover, .hover { background: #4BB747; color: #FFFFFF; }
再就是页面代码了：
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>用jquery实现table奇偶行不同色</title> <link href="style/mysql.css" rel="stylesheet" /> <script src="javascript/jquery-1.7.2.min.js"></script> <script language="javascript" type="text/javascript"> $(document).ready(function () { //排除th标签，th可能是有自己特有的样式，所以定义th样式。 //$("tr:not(:has(th)):odd").addClass("odd"); //$("tr:not(:has(th)):even").addClass("even"); $("tr:odd").addClass("odd"); $("tr:even").addClass("even"); //如果CSS中不定义".odd:hover"和".even:hover"就需要toggleClass()。 /* $("tr").mouseover(function () { $(this).toggleClass(".hover"); }); $("tr").mouseout(function () { $(this).toggleClass(".hover"); }); */ }); </script> </head> <body> <div id="outline"> <table> <tr id="tth"> <th>data</th> <th>data</th> <th>data</th> <th>data</th> </tr> <tr> <td>data</td> <td>data</td> <td>data</td> <td>data</td> </tr> <tr> <td>data</td> <td>data</td> <td>data</td> <td>data</td> </tr> <tr> <td>data</td> <td>data</td> <td>data</td> <td>data</td> </tr> <tr> <td>data</td> <td>data</td> <td>data</td> <td>data</td> </tr> </table> </div> </body> </html>
如果不需要鼠标事件，只需奇偶行不同色直接可以用CSS搞定。
table tr:nth-child(even) td, table tr:nth-child(even) th { background-color: #FBD106; } table tr:nth-child(odd) td, table tr:nth-child(odd) th { background-color: #E6453B; }