使用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 相关文章推荐
js操作iframe兼容各种主流浏览器示例代码
Jul 22 Javascript
jquery统计输入文字的个数并对其进行判断
Jan 07 Javascript
jquery淡化版banner异步图片文字效果切换图片特效
Apr 08 Javascript
详解js私有作用域中创建特权方法
Jan 25 Javascript
bootstrap输入框组使用方法
Feb 07 Javascript
jQuery查找dom的几种方法效率详解
May 17 jQuery
vue.js $refs和$emit 父子组件交互的方法
Dec 20 Javascript
react-native动态切换tab组件的方法
Jul 07 Javascript
node微信开发之获取access_token+自定义菜单
Mar 17 Javascript
vue cli使用融云实现聊天功能的实例代码
Apr 19 Javascript
自定义javascript验证框架示例【附源码下载】
May 31 Javascript
在Vue中使用antv的示例代码
Jun 29 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
php使用ob_flush不能每隔一秒输出原理分析
2015/06/02 PHP
CodeIgniter常用知识点小结
2016/05/26 PHP
php的无刷新操作实现方法分析
2020/02/28 PHP
认识延迟时间为0的setTimeout
2008/05/16 Javascript
用js实现的检测浏览器和系统的函数
2009/04/09 Javascript
Javascript 判断Flash是否加载完成的代码
2010/04/12 Javascript
jquery struts 验证唯一标识(公用方法)
2013/03/27 Javascript
javascript判断是手机还是电脑访问网页的简单实例分享
2014/06/03 Javascript
浅谈js常用内置方法和对象
2016/09/24 Javascript
用jQuery的AJax实现异步访问、异步加载
2016/11/02 Javascript
写jQuery插件时的注意点
2017/02/20 Javascript
Vue下的国际化处理方法
2017/12/18 Javascript
详解使用vue-cli脚手架初始化Vue项目下的项目结构
2018/03/08 Javascript
每个 JavaScript 工程师都应懂的33个概念
2018/10/22 Javascript
python批量下载图片的三种方法
2013/04/22 Python
python基础教程项目二之画幅好画
2018/04/02 Python
浅谈配置OpenCV3 + Python3的简易方法(macOS)
2018/04/02 Python
pygame游戏之旅 调用按钮实现游戏开始功能
2018/11/21 Python
python hbase读取数据发送kafka的方法
2018/12/27 Python
详解Django-restframework 之频率源码分析
2019/02/27 Python
Python列表与元组的异同详解
2019/07/02 Python
python 正则表达式参数替换实例详解
2020/01/17 Python
浅谈pytorch torch.backends.cudnn设置作用
2020/02/20 Python
加拿大鞋子连锁店:Town Shoes
2016/09/26 全球购物
美国首屈一指的高品质珠宝设计师和零售商:Allurez
2018/01/23 全球购物
Orvis官网:自1856年以来,优质服装、飞钓装备等
2018/12/17 全球购物
Shell编程面试题
2016/05/29 面试题
高分子材料个人求职信范文
2013/09/25 职场文书
餐饮主管岗位职责
2013/12/10 职场文书
简历上的自我评价
2014/02/03 职场文书
国庆促销活动总结
2014/08/29 职场文书
领导班子整改措施
2014/10/24 职场文书
2015年办公室文员工作总结
2015/04/24 职场文书
新闻稿件写作技巧
2015/07/18 职场文书
食堂卫生管理制度
2015/08/04 职场文书
Linux下使用C语言代码搭建一个简单的HTTP服务器
2022/04/13 Servers