jquery实现table表格选中后变颜色

原创 2012年03月26日 19:10:38

//table表格可以

效果图为


<!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>
<style>
.even{
	background-color:#cccccc;
	}
.odd{
	background-color:#ffff99;	
		}
.d{
	background-color:#09F;
	}
	.input1{
		background:#9C3;
		}
</style>
<script type="text/javascript" language="javascript" src="../../jquery-1.7.1.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
	//设置偶数的
	$("tr:even").addClass("even");
	//设置奇数的
	$("tr:odd").addClass("odd");
	$("tr").mouseover(function(){
		$(this).removeClass("even odd");
	    $(this).toggleClass("d");
	});
	$("tr").mouseout(function(){
	    $(this).toggleClass("d");
		$("tr:even").addClass("even");;
		$("tr:odd").addClass("odd");
	});
	$("input[class=box]").each(function(){
		$(this).click(function(){
			if(this.checked==true){
			$(this).parent().parent().addClass("input1");
			}
			if(this.checked==false){
				$(this).parent().parent().removeClass("input1");
				}
			});
		});
	});
</script>
</head>
<body>
<table width="500" border="1">
  <tr>
    <td><input type="checkbox" id="box1" class="box" ></td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
   <td><input type="checkbox" id="box2" class="box" ></td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
   <td><input type="checkbox" id="box2" class="box" ></td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
   <td><input type="checkbox" id="box3" class="box" ></td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
   <td><input type="checkbox" id="box4" class="box" ></td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
   <td><input type="checkbox" id="box5" class="box" ></td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
   <td><input type="checkbox" id="box6" class="box" ></td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
   <td><input type="checkbox" id="box7" class="box" ></td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
</table>
</body>
</html>

隔行变色,并且随鼠标移动变色,当你选择自己想要的表格是表格会换另一种颜色。总之是很好的表格实现

相关文章推荐

使用jQuery实现table表格排序js插件

在前不久做的一个web项目中,需要实现js表格排序的效果,当时为了省事,就在网上找了几个相关的js插件,像:jQuery的table排序插件(感觉其使用比较麻烦或不清楚其具体用法,就没有使用)、原生态...

jQuery实现编辑修改表格table

html: 标题 糖果 ...
  • zfangls
  • zfangls
  • 2016年12月28日 15:36
  • 292

jquery实现json数据填充到table表格中并且实现remove add 数据

题记:最近做关于OpenDaylight的项目,然还用到了一些前端和javaee的相关技术,本代码实现的是通过数据库部分读到的json数据,数据库部分没有写出,填充到table表格中,并且也可以实现t...

jQuery实现表格颜色的交替显示

很多时候为了清楚显示行数据,便于阅读,一般多是采用隔行颜色交替显示。 当然实现的方式也有很多,如果对于网站已经加载了jQuery(现在很多网站程序多是加载了jQuery的)可以很容易实现。 那么就...
  • jaray
  • jaray
  • 2013年09月18日 11:42
  • 884

jquery实现表格颜色变化

在学习jquery的过程中学习到了如何利用jquery来渲染表格的颜色,这个地方由于是初次接触所以也都是一些初级的案例首先需要介绍两个当页面加载完毕之后才会执行的函数 //页面加载完毕之后执行函数体内...

用JQuery实现表格隔行换颜色

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

jQuery实现表格行点击选中复选框

$(".list tr").each(function(){      $(this).children().click(function(e){          $(e.target).par...
  • xzlizha
  • xzlizha
  • 2014年10月22日 11:53
  • 2155

Jquery实现table偶行变色

jquery实现斑马玟效果,偶数行背景色为#FBFBFB
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jquery实现table表格选中后变颜色
举报原因:
原因补充:

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