JQuery实现table的隔行换色和鼠标移动事件

最新推荐文章于 2020-11-03 22:25:30 发布

ikeycn

最新推荐文章于 2020-11-03 22:25:30 发布

阅读量234

点赞数

文章标签： jQuery Gmail Python Ruby JavaScript ViewUI

本文链接：https://blog.csdn.net/ikeycn/article/details/83643647

版权

[img]http://ikeycn.iteye.com/upload/picture/pic/65219/80911eb7-039d-3181-a457-ebe9f231bc85.png[/img]

是不是很漂亮的表格效果，下面是使用jQuery的实现代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Hello World jQuery!</title>
	<script type="text/javascript" src="scripts/jquery-1.4.2.js"></script>
	<!--将jQuery引用进来-->
	<script type="text/javascript">
		$(document).ready(function(){ //这个就是传说的ready
			$(".stripe tr").mouseover(function(){
				//如果鼠标移到class为stripe的表格的tr上时，执行函数
				$(this).addClass("over");}).mouseout(function(){
					//给这行添加class值为over，并且当鼠标一出该行时执行函数
					$(this).removeClass("over");}) //移除该行的class
			$(".stripe tr:even").addClass("alt");
			//给class为stripe的表格的偶数行添加class值为alt
		});
	</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 style="background-color: #FFF">
	<table class="stripe" width="50%" border="0" cellspacing="0" cellpadding="0">
		<!--用class="stripe"来标识需要使用该效果的表格-->
		<thead>
			<tr>
				<th>姓名</th>
				<th>年龄</th>
				<th>QQ</th>
				<th>Email</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>Java</td>
				<td>23</td>
				<td>31540205</td>
				<td>Java@gmail.com</td>
			</tr>
			<tr>
				<td>Javascript</td>
				<td>23</td>
				<td>31540205</td>
				<td>Javascript@126.com</td>
			</tr>
			<tr>
				<td>jQuery</td>
				<td>23</td>
				<td>31540205</td>
				<td>jquery@gmail.com</td>
			</tr>
			<tr>
				<td>c_cpp</td>
				<td>23</td>
				<td>31540205</td>
				<td>c_cpp@gmail.com</td>
			</tr>
			<tr>
				<td>python</td>
				<td>23</td>
				<td>31540205</td>
				<td>python@gmail.com</td>
			</tr>
			<tr>
				<td>Ruby</td>
				<td>23</td>
				<td>31540205</td>
				<td>Ruby@gmail.com</td>
			</tr>
		</tbody>
	</table>
</body>
</html>

这里有一个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等方法之后，都会返回当前的对象，所以可以进行链式操作

说明：该代码出自于15 Days of jQuery(Day 2)---很容易的制作双色表格，版权归原作者所有

ikeycn

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫