html

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8" />

		<title>表格变色</title>

		<script type="text/javascript" src="js/jquery-3.0.0.min.js" ></script>

		<script type="text/javascript" src="js/test.js" ></script>

	    <link rel="stylesheet" href="css/test.css" />

	</head>

	<body>

		<table>

<thead>

<tr><th></th><th>时间</th><th>年份</th><th>地点</th></tr>

</thead>

<tbody>

<tr><td><input type="checkbox" name="radioa" value="" /></td><td>星期一</td><td>2011</td><td>暂无</td></tr>

<tr><td><input type="checkbox" name="radioa" value="" /></td><td>星期二</td><td>2011</td><td>暂无</td></tr>

<tr><td><input type="checkbox" name="radioa" value="" checked="checked" /></td><td>星期三</td><td>2011</td><td>暂无</td></tr>

<tr><td><input type="checkbox" name="radioa" value="" /></td><td>星期四</td><td>2011</td><td>暂无</td></tr>

<tr><td><input type="checkbox" name="radioa" value="" /></td><td>星期五</td><td>2011</td><td>暂无</td></tr>

<tr><td><input type="checkbox" name="radioa" value="" /></td><td>星期六</td><td>2011</td><td>暂无</td></tr>

</tbody>

</table>

	</body>

</html>

　　css

* { padding:0; margin:0;}

body { 

	font-size:12px; padding:100px;}

table { border-collapse:collapse;}

th {

	border-bottom: 1px solid #000;

	padding:15px 30px;

	}

td { padding:15px 30px;}

tr { cursor:pointer;}

.odd { background:#eee;}

.even { background:#ccc;}

.selected { background:#564e40;}

　　js

$(document).ready(function(){

	$("tbody>tr:odd").addClass("odd");

	$("tbody>tr:even").addClass("even")

	$("tr:contains('星期三')").addClass("selected");

	$("tbody>tr").click(function(){

		if($(this).hasClass("selected")){

				$(this).removeClass("selected")

				.find(":checkbox").attr("checked",false);

			}else{

				$(this).addClass("selected")

				.find(":checkbox").attr("checked",true);

				}

		});

	});

　　效果：

2017-09-25 17:16:29

jQuery 实现表格变色效果的更多相关文章

  1. jquery做表格变色效果-demo

    第一步:写html代码部分: <table style="width:300px;"> <tr><td>1</td></tr& ...

  2. Jquery表格变色 复选框全选，反选

    /*jquery静态表格变色*/ $(".tr2").mouseover(function(){ $(this).css("background"," ...

  3. JQuery实现隔行变色和突出显示当前行 效果

    运行效果如下图: jquery关键代码: <script type="text/javascript"> //该文件为:js.js // 当鼠标移到表格上是,当前一行背 ...

  4. 用JQuery实现表格隔行变色和突出显示当前行

    用JQuery实现表格隔行变色和突出显示当前行 上源码 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "htt ...

  5. jQuery中常用网页效果应用

    一.常用网页效果应用 1.表单应用 表单由表单标签.表单域和表单按钮组成. 1.1单行文本框应用 例:获取和失去焦点改变样式 首先,在网页中创建一个表单,HTML代码如下 <form actio ...

  6. 使用jquery合并表格中相同文本的相邻单元格

    一.效果 二.代码 <!DOCTYPE HTML> <html> <head> <title>Example</title> <met ...

  7. 基于jquery的表格动态创建，自动绑定，自动获取值

    最近刚加入GUT项目,学习了很多其他同事写的代码,感觉受益匪浅. 在GUT项目中,经常会碰到这样一个问题:动态生成表格,包括从数据库中读取数据,并绑定在表格中,以及从在页面上通过jQuery新增删除表 ...

  8. 第七章 jQuery操作表格及其它应用

    1.表格变色 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org ...

  9. 基于jQuery悬停图片变色放大特效

    分享一款基于jQuery悬停图片变色放大特效是一款响应式鼠标悬停图片放大效果代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div style="width ...

随机推荐

  1. Codeforces Round #538 (Div. 2) (CF1114)

    Codeforces Round #538 (Div. 2) (CF1114)   今天昨天晚上的cf打的非常惨(仅代表淮中最低水平   先是一路缓慢地才A掉B,C,然后就开始杠D.于是写出了一个O( ...

  2. Java中的heap和stack

    heap和stack Java的内存分为两类,一类是栈内存,一类是堆内存. 栈内存:是指程序进入一个方法时,会为这个方法单独分配一块私属存储空间,用于存储这个方法内部的局部变量,当这个方法结束时,分配 ...

  3. Struts和Hibernate的jar包

    这几天做了一个javaee关于struts框架和Hibernate框架的实践,实践内容倒是没什么,关键是找框架的配置花了许多时间 于是在这里把这两个框架的有关jar上传分享一下 链接: https:/ ...

  4. 回炉Spring--Bean生命周期及AOP

    Spring容器: 在基于Spring的应用中,你的应用对象生存于Spring容器(container)中,Spring容器负责创建对象,装配它们,配置它们并管理它们的整个生命周期,从生存到死亡.(在 ...

  5. WIN10无法识别安卓设备，提示Windows 无法验证此设备所需的驱动程序的数字签名

    在设备管理器,显示ANDROID设备是感叹号, 不管更新驱动,还是下载什么手机助手自动安装驱动,均不可解. 从属性中查看提示的是“Windows 无法验证此设备所需的驱动程序的数字签名”, 解决办法: ...

  6. Maven开始

    1:加入Maven插件: 这句话的意思是: 从本地仓库找到相应的jar包 <localRepository>F:\RepMaven</localRepository 2:创建一个Ma ...

  7. 4412 GPIO读 和 ioremap控制GPIO寄存器

    一.配置GPIO读 在视频14的基础上做 1.利用拨码开关来实现GPIO输入 所以AP_SLEEP对应GPC0_3,然后在drivers/gpio/gpio-exynos4.c中对应EXYNOS4_G ...

  8. vue开发微信公众号--开发准备

    由于工作项目的原因,需要使用vue开发微信公众号,但是这种微信公众号更多是将APP套了一个微信的壳子,除了前面的授权和微信有关系以外,其他的都和微信没多大的关系了,特此记录 开发流程 首先需要在电脑上 ...

  9. mysql linux下安装部署

    一.安装简介 用户名:mysql安装目录:/usr/local/mysql-5.5数据库目录:/data/mysql/data源码包:mysql-5.5.28.tar.gz 二.安装准备 a.vi / ...

  10. bootstrap基础模板页面,详细注释

    ​ <!--html5 骨架--> <!DOCTYPE html> <!--语言是中文简体--> <html lang="zh-cn"&g ...