如何用jquery控製表格奇偶行及活動行顏色_jquery

雖然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; } 再就是頁面代碼了：

複製程式碼


程式碼如下:



程式碼如下:



程式碼🎜>

data	data	data	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; }