先看看这个使用jQuery做的双色表格的效果:
这个双色表格看上去应该觉得挺专业的,不过它用jQuery实现的确很简单。
第一步:写好css。
第二步:写jQuery页面加载事件:
上面的鼠标悬浮事件采用了jQuery的链式操作,本来是应该这么写的:
$(".stripe tr").mouseover(function(){ $(this).addClass("over");}) $(".stripe tr").mouseout(function(){ $(this).removeClass("over"); })
但上面的的代码却写成了这样:
$(".stripe tr").mouseover(function(){ $(this).addClass("over");}).mouseout(function(){ $(this).removeClass("over");})
在jQuery中,执行完mouseover或mouseout等方法之后,它会返回当前的操作对象,所以可以采用jQuery的链式操作。
下面把完整的jsp代码贴出来MyJsp.jsp:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %>jQuery用几分钟时间搞定双色表格
姓名 | 年龄 | ||
---|---|---|---|
李晓红 | 24 | 859855*** | 859855***@qq.com |
云天河 | 18 | 123456789 | 123456789@qq.com |
柳梦璃 | 18 | 987654321 | 987654321@qq.com |
韩菱纱 | 18 | 888888888 | 888888888@qq.com |
玄霄 | 58 | 123456 | 123456@qq.com |
土灵珠 | 1000 | -10000 | -10000@qq.com |
怎么样?jQuery就是这么牛x.
以上这篇使用jQuery5分钟快速搞定双色表格的简单实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持全福编程网。