雖然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;
}
}
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; } 再就是頁面代碼了：
複製程式碼
程式碼如下:
程式碼如下:
程式碼🎜>
用jquery實作table奇偶行不同色
data |
data |
data |
data |
data |
data |
data |
data |
data |
data |
data |
data |
data |
data |
data |
data |
data |
如果不需要滑鼠事件，只要奇偶行不同色直接可以用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; }
