先看看这个使用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; } tr.alt td { background:#ecf6fc; } tr.over td { background:#bcd4ec; }
第二步:写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用几分钟时间搞定双色表格 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; } tr.alt td { background:#ecf6fc; } tr.over td { background:#bcd4ec; }
姓名 年龄 李晓红 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分钟快速搞定双色表格的简单实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持考高分网。



