使用jQuery5分钟快速搞定双色表格的简单实例

先看看这个使用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+"/";
%>


 
 
 
	
	 
	 
	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;  
	} 
	
 
 
 
 
 
 
 
 
 
姓名
 
 
年龄
 
 
QQ
 
 
Email
 
 
 
 
 
 
 
 
李晓红
 
 
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分钟快速搞定双色表格的简单实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持考高分网。