JQuery双色表格制作

最新推荐文章于 2014-08-26 23:33:53 发布

iteye_7488

最新推荐文章于 2014-08-26 23:33:53 发布

阅读量208

点赞数

分类专栏： Web前端文章标签： jQuery CSS JavaScript XHTML HTML ViewUI

本文链接：https://blog.csdn.net/iteye_7488/article/details/81932422

版权

Web前端专栏收录该内容

15 篇文章 0 订阅

订阅专栏

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="js/jquery-1.4.2.min.js"></script>
<script language="javascript" >
$(document).ready(function(){
	$(".stripe tr").mouseover(function(){
		$(this).addClass("over");}).mouseout(function(){
			$(this).removeClass("over");})
			  $(".stripe tr:even").addClass("alt");
	});
</script>

<style>
th{background:#0066FF;
color:#FFFFFF;
line-height:20px;
height:30px;
}

td{ 
padding:6px 11px;
border-bottom:solid 1px #093;
vertical-align:top;
text-align:center;
}

td*{padding:6px 11px;}

tr.alt td{
	
	background:#ecf6fc;}
	
tr.over td{
	background:#bcd4ec;}	
</style>
</head>

<body>
<table class="stripe" width="50%" border="0" cellpadding="0" cellspacing="0" id="tdata">
<tr>
<td>asdfasdfasdf</td>
<td>f342</td>
<td>rtyr</td>
<td>5y5</td>
<td>asdfasdfasdf</td>
</tr>

<tr>
<td>asdfasdfasdf</td>
<td>f342</td>
<td>rtyr</td>
<td>5y5</td>
<td>asdfasdfasdf</td>
</tr>

<tr>
<td>asdfasdfasdf</td>
<td>f342</td>
<td>rtyr</td>
<td>5y5</td>
<td>asdfasdfasdf</td>
</tr>

<tr>
<td>asdfasdfasdf</td>
<td>f342</td>
<td>rtyr</td>
<td>5y5</td>
<td>asdfasdfasdf</td>
</tr>

</table>
</body>
</html>

说明：.style的意思是获取元素节点，是指.style样式下的某个元素，所以上述红色背景区域可以有以下三中方式表示！

1.$("table tr") //table下面的 tr 元素但是这个是全局的

2.$(".style tr") //应用了这个样式的具体元素这个是局部的

3.$("#tdata tr") //#号是id名称，意味tdata下面的tr！

mouseover mouseout 是鼠标移动时间

addClass removeClass 增加和删除css样式也可以直接添加用.css("央视名称","属性值")的方法替换addClass

注意：几乎每一步JQuery操作都会返回一个JQuery对象，所以可以进行链式操作，所以上面的mousevoer，mouseout同时在一起！

iteye_7488

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery双色表格制作

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;&lt;head&gt;&lt
复制链接

扫一扫