如何用jquery控制表格奇偶行及活动行颜色

如何用jquery控制表格奇偶行及活动行颜色_jquery

WBOY

Lepaskan： 2016-05-16 16:51:58

asal

1232 orang telah melayarinya

虽然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; 
} 

再就是页面代码了：

复制代码代码如下:

用jquery实现table奇偶行不同色

  data data data data 
 data data data data 
 data data data data 
 data data data data 
 data data data data

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