多款jquery实现隔行换色、多选框选中变色【强大】

原创 2012年03月26日 21:11:52

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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>多款jquery实现隔行换色、多选框选中变色</title>
<style>
table{
	border-collapse:collapse;
	}
tr,td{
	padding:3px;
	}
.first{
	background-color:#F6C;
	}
.one{
	background-color:#FCF;
	}
.two{
	
	background-color:#FFC;
	}
.mouse{
	background-color:#99C;
	}
.selected{
	background-color:#9CF;
	}
</style>


<script language="javascript" type="text/javascript" src="../jquery-1.7.1.js"></script>
<script language="javascript" type="text/javascript">


$(document).ready(function (){
		
		
//***************************table1*******************************************
	//设置第一行的颜色
		$("#table1 tr:first").addClass("first");
		//设置单行双行的颜色
		$("#table1 tr:not(:first):even").addClass("one");
		$("#table1 tr:not(:first):odd").addClass("two");
		
		//鼠标over和out是颜色的改变
		$("#table1 tr:not(:first)").hover(function (){
			
				$(this).toggleClass("mouse");
				
			}, function (){
				
				$(this).toggleClass("mouse");
				
		});
		//点击时改变当前tr的颜色
		$("#table1 tr:not(:first)").click(function (){


			$(this).toggleClass("selected");


		});
		
//***************************table2*******************************************	
	//设置第一行的颜色
		$("#table2 tr:first").addClass("first");
		//设置单行双行的颜色
		$("#table2 tr:not(:first):even").addClass("one");
		$("#table2 tr:not(:first):odd").addClass("two");
		
		//鼠标over和out是颜色的改变
		$("#table2 tr:not(:first)").hover(function (){
			
				$(this).toggleClass("mouse");
				
			}, function (){
				
				$(this).toggleClass("mouse");
				
		});
				//点击时改变当前tr的颜色,并选中
		$("#table2 tr:not(:first)").toggle(function (){


			$(this).addClass("selected").find("input").attr("checked",true);
		},function (){
			
			$(this).removeClass("selected").find("input").attr("checked",false);
		});




		


//***************************table3*******************************************	
	//设置第一行的颜色
		$("#table3 tr:first").addClass("first");
		//设置单行双行的颜色
		$("#table3 tr:not(:first):even").addClass("one");
		$("#table3 tr:not(:first):odd").addClass("two");
		
		//鼠标over和out是颜色的改变
		$("#table3 tr:not(:first)").hover(function (){
			
				$(this).toggleClass("mouse");
				
			}, function (){
				
				$(this).toggleClass("mouse");
				
		});


		//点击时改变当前tr的颜色,并选中
		$("#table3 tr:not(:first)").click(function (){
			$("tr").removeClass("selected");
			$(this).addClass("selected").find("input").attr("checked",true);
			
		});


});






</script>
</head>
<body>
<h3>demo1 隔行、滑动、点击、变色</h3>
<br />
<table width="500" id="table1">
    <tr>
        <th>姓名</th>
        <th>性别</th>
        <th>手机</th>
        <th>邮箱</th>
        <th>爱好</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>男</td>
        <td>159337512333</td>
        <td>12@163.com</td>
        <td>足球</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>男</td>
        <td>159337512333</td>
        <td>12@163.com</td>
        <td>篮球</td>
    </tr>
    <tr>
        <td>王五</td>
        <td>女</td>
        <td>159337512333</td>
        <td>12@163.com</td>
        <td>乒乓球</td>
    </tr>
    <tr>
        <td>赵六</td>
        <td>男</td>
        <td>159337512333</td>
        <td>12@163.com</td>
        <td>篮球</td>
    </tr>
    <tr>
        <td>小七</td>
        <td>男</td>
        <td>159337512333</td>
        <td>12@163.com</td>
        <td>足球</td>
    </tr>
    <tr>
        <td>小八</td>
        <td>女</td>
        <td>159337512333</td>
        <td>12@163.com</td>
        <td>乒乓球</td>
    </tr>
    <tr>
        <td>小九</td>
        <td>女</td>
        <td>159337512333</td>
        <td>12@163.com</td>
        <td>足球</td>
    </tr>
</table>
<br />


<h3>demo2 隔行、滑动、点击、变色+多选框选中的行 变色</h3>
<br />
<table width="500" id="table2">
    <tr>
    	<th></th>
        <th>姓名</th>
        <th>性别</th>
        <th>手机</th>
        <th>邮箱</th>
        <th>爱好</th>
    </tr>
    <tr>
    	<td><input type="checkbox"/></td>
        <td>张三</td>
        <td>男</td>
        <td>159337512333</td>
        <td>12@163.com</td>
        <td>足球</td>
    </tr>
    <tr>
   		 <td><input type="checkbox"/></td>
        <td>李四</td>
        <td>男</td>
        <td>159337512333</td>
        <td>12@163.com</td>
        <td>篮球</td>
    </tr>
    <tr>
 	   <td><input type="checkbox"/></td>
        <td>王五</td>
        <td>女</td>
        <td>159337512333</td>
        <td>12@163.com</td>
        <td>乒乓球</td>
    </tr>
    <tr>
        <td><input type="checkbox"/></td>
        <td>赵六</td>
        <td>男</td>
        <td>159337512333</td>
        <td>12@163.com</td>
        <td>篮球</td>
    </tr>
    <tr>
        <td><input type="checkbox"/></td>
        <td>小七</td>
        <td>男</td>
        <td>159337512333</td>
        <td>12@163.com</td>
        <td>足球</td>
    </tr>
    <tr>
        <td><input type="checkbox"/></td>
        <td>小八</td>
        <td>女</td>
        <td>159337512333</td>
        <td>12@163.com</td>
        <td>乒乓球</td>
    </tr>
    <tr>
        <td><input type="checkbox"/></td>
        <td>小九</td>
        <td>女</td>
        <td>159337512333</td>
        <td>12@163.com</td>
        <td>足球</td>
    </tr>
</table>
<br />


<h3>demo3 隔行、滑动、点击、变色+单选框选中的行 变色</h3>
<br />
<table width="500" id="table3">
    <tr>
    	<th></th>
        <th>姓名</th>
        <th>性别</th>
        <th>手机</th>
        <th>邮箱</th>
        <th>爱好</th>
    </tr>
    <tr>
    	<td><input type="radio" name="ra" /></td>
        <td>张三</td>
        <td>男</td>
        <td>159337512333</td>
        <td>12@163.com</td>
        <td>足球</td>
    </tr>
    <tr>
   		 <td><input type="radio" name="ra" /></td>
        <td>李四</td>
        <td>男</td>
        <td>159337512333</td>
        <td>12@163.com</td>
        <td>篮球</td>
    </tr>
    <tr>
 	   <td><input type="radio" name="ra" /></td>
        <td>王五</td>
        <td>女</td>
        <td>159337512333</td>
        <td>12@163.com</td>
        <td>乒乓球</td>
    </tr>
    <tr>
        <td><input type="radio" name="ra" /></td>
        <td>赵六</td>
        <td>男</td>
        <td>159337512333</td>
        <td>12@163.com</td>
        <td>篮球</td>
    </tr>
    <tr>
        <td><input type="radio" name="ra" /></td>
        <td>小七</td>
        <td>男</td>
        <td>159337512333</td>
        <td>12@163.com</td>
        <td>足球</td>
    </tr>
    <tr>
        <td><input type="radio" name="ra" /></td>
        <td>小八</td>
        <td>女</td>
        <td>159337512333</td>
        <td>12@163.com</td>
        <td>乒乓球</td>
    </tr>
    <tr>
        <td><input type="radio" name="ra" /></td>
        <td>小九</td>
        <td>女</td>
        <td>159337512333</td>
        <td>12@163.com</td>
        <td>足球</td>
    </tr>
</table>


</body>
</html>

效果图:


angular隔行换色效果

angular var m1=angular.module('myApp1
  • qq_32584661
  • qq_32584661
  • 2016年11月15日 09:18
  • 376

用PHP和JS分别实现隔行换色

1.PHP实现隔行换色
  • qq_30292863
  • qq_30292863
  • 2015年12月01日 16:20
  • 995

CSS 通过nth实现隔行换色

先上效果图: 实现代码: .mytable{ width:100%; border-collapse:collapse; } .mytable td{ border:1...
  • zhangfeng2124
  • zhangfeng2124
  • 2017年03月27日 10:46
  • 173

css隔行换色和鼠标划过变色

css table隔行换色和鼠标划过变色
  • paincupid
  • paincupid
  • 2016年01月03日 21:42
  • 1462

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

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

最简单的struts2中使用<s:iterator>实现隔行变色代码[珍藏版]

" bgcolor=""> 迭代的内容   下面是另外一种 style="background-color:gray;">     参数说明: first 是...
  • SE_XiaoFeng
  • SE_XiaoFeng
  • 2012年04月25日 17:38
  • 2187

实现wpf listview listbox 隔行变色的简单方法

  • qq_37429590
  • qq_37429590
  • 2017年09月19日 10:48
  • 433

在ssrs中矩阵图表的隔行变色

在ssrs里,如果图表不是很大,而且它要求
  • yimoxiaohu
  • yimoxiaohu
  • 2014年09月08日 14:33
  • 387

用JQuery实现表格隔行换颜色

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

extjs之隔行变色和grid加载时的等待

在grid的里配置 viewConfig : {  loadMask: new Ext.LoadMask(this,{msg:'正在加载数据...'}), getRowClass: func...
  • woshiyjk
  • woshiyjk
  • 2012年07月12日 15:47
  • 2364
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:多款jquery实现隔行换色、多选框选中变色【强大】
举报原因:
原因补充:

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