选中checkbox框 实现表格的隔行变色(二)

原创 2012年03月27日 17:38:03
<!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">
<style>
.once{
	background-color:#0FC;
	 }
.after{
background-color:#F00;	
	}	 
.selected1{
	background-color:#33C;
	   }

</style>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script language="javascript" type="text/javascript" src="../20120319/include/jquery.js"></script>
<script language="javascript" type="text/javascript"  >
//使用jquery绑定事件
$(document).ready(function (){
         //设置隔行变色
		 $("tr:even").addClass("once");
		 $("tr:odd").addClass("after");
		 //根据name获取所有的check,然后进行循环
		 $("input[name='box']").each(function (){
			 //给check添加事件
			 $(this).click(function (){
				 //判断check是否被选中
			   if(this.checked==true){
				 $(this).parent().parent().addClass("selected1");
				  }else{
				 $(this).parent().parent().removeClass("selected1");	  
					  }
			      }); 
			   });
			
			
		 
   });
  
</script>
</head>

<body>
<table width="600" border="1">
  <tr>
    <td><input type="checkbox" name="box" /></td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
   <td><input type="checkbox" name="box" /></td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
   <td><input type="checkbox" name="box" /></td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
   <td><input type="checkbox" name="box" /></td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
   <td><input type="checkbox" name="box" /></td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
   <td><input type="checkbox" name="box" /></td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
   <td><input type="checkbox" name="box" /></td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
   <td><input type="checkbox" name="box" /></td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
</table>

</body>
</html>

相关文章推荐

JQurey 隔行变色,鼠标悬停/移开,CheckBox选中,页面排序

$(function() { // jQuery.fn.alternateRowColors = function() { //做成插件的形式 // ...

操作gridview,选中行时改变背景色且checkbox被选中,隔行变色,全选变色

css: .checked { background: #c0c0ff; } .odd { background: #72FE95; } .even { backgrou...

用bootstrap实现表格隔行变色,hover 变色并在需要时出现滚动条

边框表格布局 名称 城市 密码...

[核格Hearken平台]核格平台表格隔行变色功能的实现

核格平台通过行加载事件实现表格隔行变色功能

jquery实现表格的隔行变色

无标题文档 $(document).ready(function(){ //----------------处理表格的隔行变色--------------- v...

js实现表格的全选,反选,删除所选行以及隔行变色

Untitled Document                                        table{                     border:#2...

实现隔行变色效果升级以及实现表格全选、反选、删除效果

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> 实现隔行变...

jQuery实现表格隔行变色

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

点击单选按钮 实现表格的隔行变色

/*定义了三个样式*/ .once{ background-color:#0FC; } .after{ background-color:#F00; } .selected...
  • HUMHSX
  • HUMHSX
  • 2012年03月27日 17:36
  • 881

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

jquery实现隔行换色、多选框选中变色,效果还不错 多款jquery实现隔行换色、多选框选中变色 table{ border-collapse:collapse; ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:选中checkbox框 实现表格的隔行变色(二)
举报原因:
原因补充:

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