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

最新推荐文章于 2022-08-06 14:45:32 发布

原创最新推荐文章于 2022-08-06 14:45:32 发布 · 536 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #css #table #奇偶行 #ViewUI

jquery 专栏收录该内容

9 篇文章

订阅专栏

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

  //设置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"});
   		}
     });