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复制当前tr行

//复制 var vBudgetCompileObj = (function() { /*table新增/移除行,参数:tableId*/ ...
  • qq_36279445
  • qq_36279445
  • 2017年06月28日 17:28
  • 795

table中tr背景色高亮显示动态设置

选中其中一列的复选框时,该复选框所在行的背景色高亮显示(黄色)。取消选中复选框时,所在行的背景色恢复。界面显示效果如图-1所示 员工信息 div{ width:70%;...
  • wangqing84411433
  • wangqing84411433
  • 2017年04月27日 21:54
  • 1885

jQuery 插件 表格高亮显示选中行 全选、反选(四种模式)

无标题文档 jquery表格修饰:隔行换色,点击变色,多选单选变色 .dataTable { border-top: 1px solid #009286; border-right: 1px so...
  • aoyoo111
  • aoyoo111
  • 2012年08月11日 19:41
  • 9472

JQuery实现表格点击就可以修改

我们看到有些网站表格内容点击就可以直接修改,修改完后,点击回车键就能将修改内容显示成表格内容,最经典的例子:QQ签名,不点击时候看着是一段文字,点击后就能输入,点击编辑个性签名就能出现能够输入的文本框...
  • u012452488
  • u012452488
  • 2014年11月19日 14:06
  • 2175

radio、checkbox单击行,自动选中

出处: 做一个类似【试卷答题】的小项目,存在单选题、多选题。 使用label标签,只能达到点击文字 选中答案,如何做到如下图所示。 核心代码: 1.html代码 input{ floa...
  • z834410038
  • z834410038
  • 2017年03月01日 14:03
  • 198

jquery 获取 tr 中控件值 操作tr

Material/Special Tool Rental/Tool Cantainer/Transportation/Mobile ...
  • chinaboykai
  • chinaboykai
  • 2013年03月27日 14:50
  • 3536

jQuery实现table全选

今天在页面中使用jQuery实现了全选框操作,如图: 具体的实现过程很简单: 第一步 设计一个简单的表格: 设置表格列标题,在列标题中的单选框为全选框; 设置表格题,表格题的单选框就是普通的...
  • cat_pp
  • cat_pp
  • 2017年03月29日 17:54
  • 1134

jquery table表格 获取选中的某一行和某一列的值

选择 驾校名称 合作驾校名称...
  • qq_26725075
  • qq_26725075
  • 2016年04月18日 21:21
  • 13694

table动态添加、删除tr

在Web网页中动态为table添加或删除数据行是很常见的需求,实现这一效果有很多种方法,这里只介绍一种,不过在写这一解决方法的时候我感受到了熟练使用Jquery的重要性。...
  • xiaouncle
  • xiaouncle
  • 2017年05月21日 10:58
  • 705

jquary根据td中按钮的元素属性删除tr行(删选出想删除的行)

删除没有蓝色按钮的tr行。
  • ruoyuanyi
  • ruoyuanyi
  • 2014年07月11日 12:51
  • 3736
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jquery实现table表格选中后变颜色
举报原因:
原因补充:

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