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

爱被打了一巴掌 2022-06-10 04:40 129阅读 0赞

先定义好表格的奇偶行样式，如下代码：

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;   
\}  
  
  
[原文地址详情点击打开链接][Link 1]

[Link 1]: http://www.jb51.net/article/49172.htm