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

2019-11-20 20:48:23

字体：大中小

来源：转载

供稿：网友

虽然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过滤选择器:not()方法使用介绍

下一篇：jquery复选框checkbox实现删除前判断

学习交流

索泰发布一款GTX 1070 Mini迷你版本:小机

索泰发布一款GTX 1070 Mini迷你版本:小机箱大爱...

热门图片

猜你喜欢的新闻

猜你喜欢的关注