jQuery遍历实现隔行变色

原创 2012年03月21日 12:11:48
<!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>给网页中的元素添加onclick事件</title>
<script type="text/javascript" language="javascript" src="../jquery-1.7.1.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
	var oldcolor;
	$("tr").each(function(index,eleMe){
				if(index%2==0){
					$(this).css("background-color","#ffff99");
					}else{
						$(this).css("background-color","#cccccc");
						}
					}).hover(
					
					function(){
						//获取原有颜色
						oldcolor=$(this).css("background-color");
						newcolor=$(this).css("background-color","green")
						},function(){
							$(this).css("background-color",oldcolor);
							});
	
	});

</script>
</head>
<body>
<table width="300" border="1">
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
</table>
</body>
</html>


jQuery实现隔行变色

//实现table隔行变色超级简单的代码 .one{ background:#C00; } .two{ background:#09F; } $(docu...
  • xi_weina
  • xi_weina
  • 2012年03月19日 21:14
  • 9155

jQuery轻松实现表格的隔行变色,点击行变色

jQuery轻松实现表格的隔行变色,点击行变色: http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.o...
  • zwt90
  • zwt90
  • 2012年03月27日 21:12
  • 5892

用JQuery实现表格隔行换颜色

最近在学习Jquery,其实很多论坛中都有一个特点就是每张贴都是隔行换颜色的,相信这点大家可能发现。那么怎样实现这种功能呢。方法有3种:     方法一:使用CSS样式,定义两个类的样式,分别使用到...
  • suntanyong88
  • suntanyong88
  • 2011年09月20日 13:30
  • 10295

一天搞定jQuery(二)——使用jQuery实现表格的隔行换色

还记得之前我使用JavaScript来实现表格的隔行换色效果吗?如果读者初次翻阅本文,可记得看看教你一天玩转JavaScript(六)——使用JavaScript完成后台数据展示表格的隔行换色!现在我...
  • yerenyuan_pku
  • yerenyuan_pku
  • 2017年05月10日 20:52
  • 807

用js或Jquery实现table隔行变色以…

//js实现隔行变色 window.onload=function(){ var otal=document.getElementByIdx_x_x("otable"); for(var i=0; i...
  • lsfhack
  • lsfhack
  • 2017年04月08日 08:33
  • 494

利用Javascript实现隔行变色

new document .back{ background:#005aa0; } /** * 隔行变色 */ function change()...
  • java_zhaoyanli
  • java_zhaoyanli
  • 2016年03月01日 23:49
  • 1113

jQuery实现表格隔行变色

隔行变色 在很多项目中,当然可以避免使用table,而使用div来替代,但是为了能够快速的交付项目,而且对网络优化以及搜索引擎没有太高的妥协的话,我们当然可以使用喜闻乐见的表格来进行布局。使用表格布局...
  • qq_31776219
  • qq_31776219
  • 2016年11月06日 21:01
  • 329

JavaScript之使特定的表格隔行变色

思路 1.依据表格id获取表格   使用方法 getElementById("元素id") 2.表格里获取元素  使用方法 getElementsByTagName("元素') 该方法返回的是标签名...
  • u012493556
  • u012493556
  • 2015年07月28日 08:30
  • 402

js实现隔行换色

http://www.w3.org/TR/html4/strict.dtd">     js实现隔行换色---阿会楠练习作品(为我所写,非我所想)     window.onload = functi...
  • taokai
  • taokai
  • 2008年01月22日 15:59
  • 364

jQuery动态生成隔行变色表格

jQuery动态生成隔行变色表格下载地址:http://download.csdn.net/detail/lypf19900912/8638743...
  • lypf19900912
  • lypf19900912
  • 2015年04月27日 20:42
  • 2585
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jQuery遍历实现隔行变色
举报原因:
原因补充:

(最多只允许输入30个字)