如何用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; 
} 
/* 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奇偶行不同色

  datadatadatadata
 datadatadatadata
 datadatadatadata
 datadatadatadata
 datadatadatadata

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

以上就是如何用jquery控制表格奇偶行及活动行颜色的详细内容，更多请关注0133技术站其它相关文章！