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


Posted in Javascript onAugust 08, 2016

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

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

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

第一步:写好css。

<style type="text/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加上背景色*/ 
} 
 
tr.over td { 
  background:#bcd4ec; /*这个将是鼠标高亮行的背景色*/ 
} 
</style>

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

<script type="text/javascript"> 
	$(function(){
			//给class为stripe的表格的偶数行添加class值为alt 
	  $(".stripe tr:even").addClass("alt"); 
			$(".stripe tr").mouseover(function(){//如果鼠标移到class为stripe的表格的tr上时,执行函数 
    $(this).addClass("over");}).mouseout(function(){//给这行添加class值为over,并且当鼠标一出该行时执行函数
     $(this).removeClass("over");
   })
	}); 
</script>

上面的鼠标悬浮事件采用了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+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
 <head>
 <base href="<%=basePath%>">
 <title>jQuery用几分钟时间搞定双色表格</title>
	<script type="text/javascript" src="mybag/jquery-1.4.2.min.js"></script>
	<script type="text/javascript"> 
	$(function(){
			//给class为stripe的表格的偶数行添加class值为alt 
	  $(".stripe tr:even").addClass("alt"); 
			$(".stripe tr").mouseover(function(){//如果鼠标移到class为stripe的表格的tr上时,执行函数 
    $(this).addClass("over");}).mouseout(function(){//给这行添加class值为over,并且当鼠标一出该行时执行函数
     $(this).removeClass("over");
   })
	}); 
	</script> 
	<style type="text/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加上背景色*/ 
	} 
	 
	tr.over td { 
	  background:#bcd4ec; /*这个将是鼠标高亮行的背景色*/ 
	} 
	</style>
 </head>
 
<body> 
<!--用class="stripe"来标识需要使用该效果的表格--> 
<table class="stripe" width="50%" border="0" cellspacing="0" cellpadding="0"> 
<thead> 
 <tr> 
 <th>姓名</th> 
 <th>年龄</th> 
 <th>QQ</th> 
 <th>Email</th> 
 </tr> 
</thead> 
<tbody> 
 <tr> 
 <td>李晓红</td> 
 <td>24</td> 
 <td>859855***</td> 
 <td>859855***@qq.com</td> 
 </tr> 
 <tr> 
 <td>云天河</td> 
 <td>18</td> 
 <td>123456789</td> 
 <td>123456789@qq.com</td> 
 </tr> 
 <tr> 
 <td>柳梦璃</td> 
 <td>18</td> 
 <td>987654321</td> 
 <td>987654321@qq.com</td> 
 </tr> 
 <tr> 
 <td>韩菱纱</td> 
 <td>18</td> 
 <td>888888888</td> 
 <td>888888888@qq.com</td> 
 </tr> 
 <tr> 
 <td>玄霄</td> 
 <td>58</td> 
 <td>123456</td> 
 <td>123456@qq.com</td> 
 </tr> 
 <tr> 
 <td>土灵珠</td> 
 <td>1000</td> 
	<td>-10000</td> 
 <td>-10000@qq.com</td> 
 </tr> 
</tbody> 
</table> 
<p>怎么样?jQuery就是这么牛x.</p> 
</body>
</html>

以上这篇使用jQuery5分钟快速搞定双色表格的简单实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery选中select控件 无法设置selected的解决方法
Sep 01 Javascript
js 火狐下取本地路径实现思路
Apr 02 Javascript
javascript自动给文本url地址增加链接的方法分享
Jan 20 Javascript
jQuery队列操作方法实例
Jun 11 Javascript
js中数组排序sort方法的原理分析
Nov 20 Javascript
JavaScript常用小技巧小结
Dec 29 Javascript
js控制网页背景音乐播放与停止的方法
Feb 06 Javascript
Angularjs的Controller间通信机制实例分析
Nov 07 Javascript
Bootstrap的class样式小结
Dec 01 Javascript
jquery 实现复选框的全选操作实例代码
Jan 24 Javascript
js CSS3实现卡牌旋转切换效果
Jul 04 Javascript
AngularJS动态生成select下拉框的方法实例
Nov 17 Javascript
BootStrap Table 分页后重新搜索问题的解决办法
Aug 08 #Javascript
用js读写cookie的简单方法(推荐)
Aug 08 #Javascript
Js遍历键值对形式对象或Map形式的方法
Aug 08 #Javascript
js中遍历Map对象的简单实例
Aug 08 #Javascript
14 个折磨人的 JavaScript 面试题
Aug 08 #Javascript
js中 计算两个日期间的工作日的简单实例
Aug 08 #Javascript
WebSocket+node.js创建即时通信的Web聊天服务器
Aug 08 #Javascript
You might like
一个查看session内容的函数
2006/10/09 PHP
php 数组的一个悲剧?
2011/05/11 PHP
初品cakephp 入门基础
2012/02/16 PHP
php从数组中随机选择若干不重复元素的方法
2015/03/14 PHP
php实现用手机关闭计算机(电脑)的方法
2015/04/22 PHP
用正则表达式 动态创建/增加css style script 兼容IE firefox
2009/03/10 Javascript
javascript 页面划词搜索JS
2009/09/28 Javascript
javascript中最常用的继承模式 组合继承
2010/08/12 Javascript
Javascript 面试题随笔
2011/03/31 Javascript
为你的网站增加亮点的9款jQuery插件推荐
2011/05/03 Javascript
ECMAScript5中的对象存取器属性:getter和setter介绍
2014/12/08 Javascript
jQuery基础语法实例入门
2014/12/23 Javascript
JS实时弹出新消息提示框并有提示音响起的实现代码
2016/04/20 Javascript
js中获取 table节点各tr及td的内容简单实例
2016/10/14 Javascript
ReactJs快速入门教程(精华版)
2016/11/28 Javascript
JS表单数据验证的正则表达式(常用)
2017/02/18 Javascript
Agularjs妙用双向数据绑定实现手风琴效果
2017/05/26 Javascript
jQuery Ajax 实现分页 kkpager插件实例代码
2017/08/10 jQuery
js实现input密码框显示/隐藏功能
2020/09/10 Javascript
vue如何根据网站路由判断页面主题色详解
2018/11/02 Javascript
跨域请求两种方法 jsonp和cors的实现
2018/11/11 Javascript
Vue 理解之白话 getter/setter详解
2019/04/16 Javascript
js时间转换毫秒的实例代码
2019/08/21 Javascript
[01:06]DOTA2隆重推出2016冬季勇士令状 内含上海特级锦标赛互动指南
2016/02/17 DOTA
PyTorch上实现卷积神经网络CNN的方法
2018/04/28 Python
如何使用django的MTV开发模式返回一个网页
2019/07/22 Python
对Django url的几种使用方式详解
2019/08/06 Python
python实现银行管理系统
2019/10/25 Python
Pycharm 如何一键加引号的方法步骤
2021/02/05 Python
canvas需要在标签里直接定义宽高
2014/12/17 HTML / CSS
超市业务员岗位职责
2013/12/05 职场文书
公司聘任书模板
2014/03/29 职场文书
纪念九一八事变83周年国旗下讲话稿
2014/09/15 职场文书
2014年心理健康教育工作总结
2014/12/06 职场文书
为自己工作观后感
2015/06/11 职场文书
Redis唯一ID生成器的实现
2022/07/07 Redis