选中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>

jQuery动态生成隔行变色表格

jQuery动态生成隔行变色表格下载地址:http://download.csdn.net/detail/lypf19900912/8638743...
  • lypf19900912
  • lypf19900912
  • 2015年04月27日 20:42
  • 2491

PyQt5教程-11-复选框

QCheckBox 是具有两种状态的控件:开和关。它是一个带有标签的复选框。复选框通常用于表示应用程序可以启用或禁用的功能。#!/usr/bin/python3 # -*- coding: utf-8...
  • weiaitaowang
  • weiaitaowang
  • 2016年08月03日 11:27
  • 3543

table里面复选框切换为单选,点击每一行也做复选框的选择切换

JS// 当表格的一整行被选中的时候  前面的单选按钮也被选择    并且要是单选       // 先将复选框做成单选        var flag = false;     $('.xuanze...
  • hebo5207_
  • hebo5207_
  • 2016年11月06日 15:24
  • 1416

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

$(function() { // jQuery.fn.alternateRowColors = function() { //做成插件的形式 // ...
  • huqingwei0824
  • huqingwei0824
  • 2011年07月15日 13:08
  • 1280

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

css: .checked { background: #c0c0ff; } .odd { background: #72FE95; } .even { backgrou...
  • zzr494684778
  • zzr494684778
  • 2011年09月08日 09:57
  • 2391

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

边框表格布局 名称 城市 密码...
  • bawcwchen
  • bawcwchen
  • 2014年12月13日 17:47
  • 8576

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

核格平台通过行加载事件实现表格隔行变色功能
  • qq_19919733
  • qq_19919733
  • 2016年11月22日 15:31
  • 113

jquery实现表格的隔行变色

无标题文档 $(document).ready(function(){ //----------------处理表格的隔行变色--------------- v...
  • wxlhlh001
  • wxlhlh001
  • 2012年03月21日 21:33
  • 951

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

Untitled Document                                        table{                     border:#2...
  • zunguitiancheng
  • zunguitiancheng
  • 2015年06月27日 06:20
  • 745

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

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> 实现隔行变...
  • wo1354691371
  • wo1354691371
  • 2012年02月29日 22:34
  • 478
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:选中checkbox框 实现表格的隔行变色(二)
举报原因:
原因补充:

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