使用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 相关文章推荐
IE中鼠标经过option触发mouseout的解决方法
Jan 29 Javascript
JavaScript实现跑马灯抽奖活动实例代码解析与优化(一)
Feb 16 Javascript
Bootstrap免费字体和图标网站(值得收藏)
Mar 16 Javascript
JS控件bootstrap datepicker使用方法详解
Mar 25 Javascript
BootStrap daterangepicker 双日历控件
Jun 02 Javascript
解决vue同一slot在组件中渲染多次的问题
Sep 06 Javascript
给localStorage设置一个过期时间的方法分享
Nov 06 Javascript
Vue框架下引入ActiveX控件的问题解决
Mar 25 Javascript
JS实现打字游戏
Dec 17 Javascript
node.js Promise对象的使用方法实例分析
Dec 26 Javascript
vue vantUI tab切换时 list组件不触发load事件的问题及解决方法
Feb 14 Javascript
Vue实现跑马灯样式文字横向滚动
Nov 23 Vue.js
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
星际争霸, 教主第一视角, ZvT经典龙蛇演义
2020/03/02 星际争霸
解决file_get_contents无法请求https连接的方法
2013/12/17 PHP
如何用javascript去掉字符串里的所有空格
2007/02/08 Javascript
jquery 页面全选框实践代码
2010/04/02 Javascript
JS中toFixed()方法引起的问题如何解决
2012/11/20 Javascript
js检测网络是否具体连接功能的代码
2014/05/23 Javascript
JavaScript通过元素的ID和name设置样式
2014/07/08 Javascript
jQuery中offsetParent()方法用法实例
2015/01/19 Javascript
Node.js环境下编写爬虫爬取维基百科内容的实例分享
2016/06/12 Javascript
Three.js学习之正交投影照相机
2016/08/01 Javascript
DWR3 访问WEB元素的两种方法实例详解
2017/01/03 Javascript
js实现图片懒加载效果
2017/07/17 Javascript
vue表单验证你真的会了吗?vue表单验证(form)validate
2019/04/07 Javascript
Vue.js中的组件系统
2019/05/30 Javascript
JS实现继承的几种常用方式示例
2019/06/22 Javascript
vue简单练习 桌面时钟的实现代码实例
2019/09/19 Javascript
Electron 调用命令行(cmd)
2019/09/23 Javascript
node.js 基于 STMP 协议和 EWS 协议发送邮件
2021/02/14 Javascript
[01:44]《为梦想出发》—联想杯DOTA2完美世界全国高校联赛
2015/09/30 DOTA
python练习程序批量修改文件名
2014/01/16 Python
浅谈Python中函数的参数传递
2016/06/21 Python
使用Pyinstaller的最新踩坑实战记录
2017/11/08 Python
Python对列表去重的多种方法(四种方法)
2017/12/05 Python
Python字典,函数,全局变量代码解析
2017/12/18 Python
学习Python selenium自动化网页抓取器
2018/01/20 Python
python中logging包的使用总结
2018/02/28 Python
numpy.where() 用法详解
2019/05/27 Python
python 实现提取log文件中的关键句子,并进行统计分析
2019/12/24 Python
Python中有几个关键字
2020/06/04 Python
Ticketmaster德国票务网站:购买音乐会和体育等门票
2016/11/14 全球购物
TUMI马来西亚官方网站:国际领先的高品质商旅箱包品牌
2018/04/26 全球购物
预备党员政审材料
2014/02/04 职场文书
《三个小伙伴》教学反思
2014/04/11 职场文书
汽修专业自荐信
2014/07/07 职场文书
乡村教师党员四风问题对照检查材料思想汇报
2014/10/08 职场文书
2016年第104个国际护士节活动总结
2016/04/06 职场文书