首页 > 网络编程 > JavaScript > javascript类库 > jquery > 表格奇偶行及活动行颜色

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

2014-04-20 15:19:29 作者：

这篇文章主要介绍了如何用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; 
} 

再就是页面代码了：

复制代码代码如下:

 
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>用jquery实现table奇偶行不同色</title> 
<link href="style/mysql.css" rel="stylesheet" /> 
<script src="javascript/jquery-1.7.2.min.js"></script> 
<script language="javascript" type="text/javascript"> 
$(document).ready(function () { 
//排除th标签，th可能是有自己特有的样式，所以定义th样式。 
//$("tr:not(:has(th)):odd").addClass("odd"); 
//$("tr:not(:has(th)):even").addClass("even"); 
$("tr:odd").addClass("odd"); 
$("tr:even").addClass("even"); 
//如果CSS中不定义".odd:hover"和".even:hover"就需要toggleClass()。 
/* 
$("tr").mouseover(function () { 
$(this).toggleClass(".hover"); 
}); 
$("tr").mouseout(function () { 
$(this).toggleClass(".hover"); 
}); 
*/ 
}); 
</script> 
</head> 
<body> 
<div id="outline"> 
<table> 
<tr id="tth"> 
<th>data</th> 
<th>data</th> 
<th>data</th> 
<th>data</th> 
</tr> 
<tr> 
<td>data</td> 
<td>data</td> 
<td>data</td> 
<td>data</td> 
</tr> 
<tr> 
<td>data</td> 
<td>data</td> 
<td>data</td> 
<td>data</td> 
</tr> 
<tr> 
<td>data</td> 
<td>data</td> 
<td>data</td> 
<td>data</td> 
</tr> 
<tr> 
<td>data</td> 
<td>data</td> 
<td>data</td> 
<td>data</td> 
</tr> 
</table> 
</div> 
</body> 
</html> 

如果不需要鼠标事件，只需奇偶行不同色直接可以用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控制表格奇偶行及活动行颜色

您可能感兴趣的文章: