JSJQ-隔行变色

最新推荐文章于 2026-01-07 00:05:42 发布

转载最新推荐文章于 2026-01-07 00:05:42 发布 · 149 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/xiaoyangtian/p/7931660.html

文章标签：

#javascript #ViewUI

本文详细介绍了如何使用HTML、CSS和JavaScript实现表格的隔行变色及鼠标悬停时背景色变化的效果，并提供了两种解决方案，一种是纯JavaScript实现，另一种是使用jQuery简化代码。

！！！- CSS

　　*{margin:0;padding:0;}
　　table{border-collapse: collapse;}
　　th,td{border:1px solid #ccc;padding:5px 25px; }

！！！ - HTML

！！！ - JavaScript

加深效果，鼠标移动到一条信息上，要显示绿色，鼠标移开的时候，颜色要变回去

代码如下：　　

效果如图：

会发现，鼠标移开的时候，之前的颜色都为空了！！！

这个原因在于this.style.background='';你看，这条语句就是凶手

解决思路：先将颜色赋值给变量，离开的时候，在赋值给background

代码：

//mouseout:不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。
//mouseleave: 只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。
　　window.onload=function()
　　{
　　　　var tab=document.getElementById('tab');
　　　　var bgColor=''; //初始化变量
　　　　//隔行变色
　　　　for(var i=0;i<tab.tBodies[0].rows.length;i++)
　　　　{
　　　　　　tab.tBodies[0].rows[i].onmouseover=function()
　　　　　　{
　　　　　　　　bgColor=this.style.background;　　　　　　//将颜色赋值给变量
　　　　　　　　this.style.background='green';
　　　　　　}
　　　　　　tab.tBodies[0].rows[i].onmouseout=function()
　　　　　　{
　　　　　　　　this.style.background=bgColor;　　　　　　//离开的时候，还是变量里存储的颜色
　　　　　　}
　　　　　　if(i%2==0)
　　　　　　{
　　　　　　　　tab.tBodies[0].rows[i].style.background='yellow';
　　　　　　}
　　　　　　else
　　　　　　{
　　　　　　　　tab.tBodies[0].rows[i].style.background='';
　　　　　　}
　　　　}
　　}

！！！ - JQuery

　　//隔行变色

　　//filter()：过滤选择器，将匹配元素集合缩减为匹配指定选择器的元素。也就是放一些可以筛选的东西

　　//：even 奇数冒号开头的，我们叫“伪类”

　　$(function(){
　　　　$('#tab tbody tr').filter(':even').css('background','yellow');
　　})

　　想要鼠标移入，颜色变绿色，移除变回之前的模样

　　代码如下：

　　方法一：

　　　　$(function(){
　　　　　　var bgColor='';
　　　　　　$('#tab tbody tr').filter(':even').css('background','yellow');
　　　　　　$('#tab tbody tr').hover(function(){
　　　　　　　　bgColor=$(this).css('background');
　　　　　　　　$(this).css('background','green');
　　　　　　},function(){
　　　　　　　　$(this).css('background',bgColor);
　　　　　　})
　　　　})

　　方法二、

　　　　$(function(){
　　　　　　var bgColor='';
　　　　　　$('#tab tbody tr').filter(':even').css('background','yellow');
　　　　　　$('#tab tbody tr').mouseover(function(){
　　　　　　　　bgColor=$(this).css('background');
　　　　　　　　$(this).css('background','green');
　　　　　　})
　　　　　　$('#tab tbody tr').mouseout(function(){
　　　　　　　　$(this).css('background',bgColor);
　　　　　　})
　　　　})