虽然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
如果不需要鼠标事件，只需奇偶行不同色直接可以用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;
}