使用jQuery5在5分钟内快速获得双色表的简单示例

让我们来看看这个用jQuery制作的双色表的效果：

这个双色表看起来应该相当专业，但是用jQuery实现起来确实很容易。

第一步：写好css。

style type=' text/CSS ' th {/* header style */background : # 0066 ff；color: # FFFFFF线高：20 px；高度：30 px；} td { padding:6px 11pxborder-bottom:1px实心# 95bce2垂直对齐： top；文本对齐：居中；} td * { padding:6px 11px} tr . alt TD { background : # ecf6fc；/*这一行将为所有tr */} tr添加背景色。overtd { background: # bcd4ec/*这将是鼠标高亮显示的行的背景色*/} /style步骤2:编写jQuery页面加载事件：

脚本类型=' text/JavaScript ' $(function(){//添加一个alt $(. stripe t 3360 even ')的类值。向类为stripe的表的偶数行添加class(' alt ')；$ ('.strip tr’)。mouse over(function(){//如果鼠标移动到类为stripe的表的tr上，执行function $(this)。add CLaSS(' over ')；}).mouseout(function(){//将类值作为over添加到这一行，然后执行function $(this)。当鼠标离开该行时，移除类(“over”)；})});上面的鼠标悬浮事件/脚本采用了jQuery的链式操作，应该已经写成如下了：

$('.条纹tr’)。mouseover(function(){ $(this))。add CLaSS(' over ')；}) $('.条纹tr’)。mouseout(函数(){ $(this))。remove CLaSS(“over”)；})但是上面的代码是这样写的：

$('.条纹tr’)。mouseover(function(){ $(this))。add CLaSS(' over ')；}).mouseout(函数(){ $(this))。remove CLaSS(“over”)；})在jQuery中，执行mouseover或mouseout后，会返回当前的操作对象，所以可以采用jQuery的链式操作。

在下面发布完整的jsp代码，MyJsp.jsp:

“% @”页面语言=“Java”导入=“Java”。乌提尔。*“页面编码=”UTF-8“% %字符串路径=请求。getcontextpath()；字符串基本路径=请求。getscheme()' ://'请求。getservername()“:”请求。getserverport()“path ”/；%!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN ' HTML头基href=' %=基路径% ' title jquery用几分钟时间搞定双色表格/title脚本类型=' text/JavaScript ' src=' http : my bag/jquery-1。4 .2 .量滴js/script脚本类型=' text/JavaScript ' $(function(){//给班级为种类的表格的偶数行添加班级值为alt $(' .条纹tr:even偶数偶数')。添加CLaSS(' alt ')；$('.条纹tr ').mouseover(function(){//如果鼠标移到班级为种类的表格的tr上时，执行函数$(这个)。添加CLaSS(' over ')；}).mouseout(函数(){//给这行添加班级值为完毕，并且当鼠标一出该行时执行函数$(这个)。移除CLaSS(" over ")；})});/script style type=' text/CSS ' th { background : # 0066 ff；color: # FFFFFF线高：20 px高度：30 px} TD { padd :6 px 11 pxborder-bottom :1 px实心# 95bce2垂直对齐：顶；文本对齐：居中；} td * { padding:6px 11px } tr。alt TD {后台： # ecf6fc/*这行将给所有的tr加上背景色*/} tr。over TD {后台： # bcd4ec/*这个将是鼠标高亮行的背景色*/}/风格/头身！-用class='stripe '来标识需要使用该效果的表格-table class=' stripe ' width=' 50% '边框=' 0 '单元格间距=' 0 '单元格填充=' 0 '和tr th姓名/th年龄/th THQq/th ThMiL/th/tr/t和tbody tr td李晓红TD/TD td24/TD TD 859855 * * */TD td859855***@qq.com/td/tr TD云天河TD/TD td18/TD TD 123456789/TD TD TD TD[电子邮件保护]/TD/tr tr TD柳梦璃TD/TD td18/TD TD 987654321/TD TD TD TD[电子邮件保护]/TD/tr tr TD韩菱纱TD/TD td18/TD TD TD 888888/TD TD TD TD[电子邮件保护]/TD/tr TD玄霄TD/TD td58/TD TD 123456/TD[电子邮件保护]/TD/tr TD土灵珠TD/TD/1000/TD-10000/TD怎么样？jQuery就是这么牛x/p/body/html以上这篇使用jQuery5分钟快速搞定双色表格的简单实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。