table 奇偶行背景色鼠标移动行颜色变化

iteye_3440

于 2011-11-03 19:24:23 发布

阅读量521

点赞数

CC 4.0 BY-SA版权

分类专栏： jquery 文章标签： jquery css table 奇偶行 ViewUI

本文链接：https://blog.youkuaiyun.com/iteye_3440/article/details/82198611

jquery 专栏收录该内容

9 篇文章

订阅专栏

本文介绍如何使用jQuery为表格的偶数行设置背景色，并实现鼠标悬停时背景色变化的效果，同时根据不同行的奇偶性显示不同背景色。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

  //设置table中偶数行的背景色


$("#tableID  tr:nth-child(even)").css({"background-color":"#E4F5FF"});
 
//绑定事件当鼠标放到元素上背景颜色，
以及鼠标移开时背景颜色（会根据奇偶行判断设置不同的背景色）


     $("#tableID tr").mouseover(function(){
     	$(this).css({"background-color":"#87CEEB"});
     }).mouseout(function(event){
   		var $index=$(this).index();
   		if($index%2==0){
   			$(this).css({"background-color":"#fff"});
   		}else{
   			$(this).css({"background-color":"#E4F5FF"});
   		}
     });