雖然jquery流行已經很多年了，一直都感覺很難，也沒有花時間去學習它，只是偶爾哪天心血來潮了去看一點點，時隔多日又會忘得一乾二淨。最近用到表格奇偶行不同色，不得不去再看jquery，雖然感覺還是難，但已經不像以前一樣無從下手了。做完後不得不來感嘆一下jquery真是太牛了，不用自己再寫一大堆javascript函數去實現了，簡單幾句輕鬆搞定。
先定義好表格的奇偶行樣式，如下代碼：
先定義好表格的奇偶行樣式，如下代碼：
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; }
再就是頁面代碼了：
<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) th { background-color: #FBD106; } table tr:nth-child(odd) td, table tr:nth-child(odd) th { background-color: #E6453B; }
