如何使用jQuery5分钟快速搞定双色表格

来源：文书网 3.25W

先看看这个使用jQuery做的双色表格的效果：

这个双色表格看上去应该觉得挺专业的，不过它用jQuery实现的确很简单。

　　第一步：写好css。

th { /*表头样式*/ background:#0066FF; color:#FFFFFF; line-height:20px; height:30px; } td { padding:6px 11px; border-bottom:1px solid #95bce2; vertical-align:top; text-align:center; } td * { padding:6px 11px; } td { background:#ecf6fc; /*这行将给所有的tr加上背景色*/ } td { background:#bcd4ec; /*这个将是鼠标高亮行的背景色*/ }

　　第二步：写jQuery页面加载事件：

$(function(){//给class为stripe的.表格的偶数行添加class值为alt $("pe tr:even")lass("alt"); $("pe tr")eover(function(){//如果鼠标移到class为stripe的表格的tr上时，执行函数 $(this)lass("over");})eout(function(){//给这行添加class值为over，并且当鼠标一出该行时执行函数 $(this)veClass("over"); })});

上面的鼠标悬浮事件采用了jQuery的链式操作，本来是应该这么写的：

$("pe tr")eover(function(){ $(this)lass("over");}) $("pe tr")eout(function(){ $(this)veClass("over"); })

但上面的的代码却写成了这样：

$("pe tr")eover(function(){ $(this)lass("over");})eout(function(){ $(this)veClass("over");})

在jQuery中，执行完mouseover或mouseout等方法之后，它会返回当前的操作对象，所以可以采用jQuery的链式操作。

下面把完整的jsp代码贴出来：

<%@ page="" language="java" import=".*" pageencoding="UTF-8"><%string path="ontextPath();String" basepath="cheme()+">

$(function(){//给class为stripe的表格的偶数行添加class值为alt $("pe tr:even")lass("alt"); $("pe tr")eover(function(){//如果鼠标移到class为stripe的表格的tr上时，执行函数 $(this)lass("over");})eout(function(){//给这行添加class值为over，并且当鼠标一出该行时执行函数 $(this)veClass("over"); })});

th { background:#0066FF; color:#FFFFFF; line-height:20px; height:30px; } td { padding:6px 11px; border-bottom:1px solid #95bce2; vertical-align:top; text-align:center; } td * { padding:6px 11px; } td { background:#ecf6fc; /*这行将给所有的tr加上背景色*/ } td { background:#bcd4ec; /*这个将是鼠标高亮行的背景色*/ }