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

最新推荐文章于 2022-06-22 10:14:36 发布

tianming-tom

最新推荐文章于 2022-06-22 10:14:36 发布

阅读量463

点赞数

分类专栏：前端文章标签： jquery color jsp

前端专栏收录该内容

55 篇文章 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;
}

原文地址详情点击打开链接