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. 【串线篇】Mybatis缓存之一级缓存

    1.体会 一级缓存:MyBatis:SqlSesion级别的缓存:默认存在,不需要设置. 机制:只要之前查询过的数据,mybatis就会保存在一个缓存中(Map):下次获取直接从缓存中拿:当前sess ...

  2. https 配置

    参考:https://www.cnblogs.com/tanghuachun/p/9951849.html 1.将pfx文件拷贝到application.properties同级目录下 2.添加配置文 ...

  3. cocos2D-X Doc

    { //https://docs.cocos2d-x.org/api-ref/index.html //https://docs.cocos.com/cocos2d-x/manual/zh/sprit ...

  4. vim编辑器的使用技巧——忽略字母大小写

    一忽略字母大小写临时生效 底行模式 底行模式下输入set  ic 注意ic是ignorecase的缩写 命令模式 命令模式进行关键字搜索 二忽略字母大小写永久生效 保存到配置文件里面,默认是没有此配置 ...

  5. spring依赖搜索

    spring项目在启动时,spring框架会根据名称自动搜索实现类. 这在日常开发中还是很有用的. 下面举两个例子. 1. 先写一个接口(或者抽象类) public interface IPerson ...

  6. Java Web学习总结（1）Tomcat使用教程

    一,简介 Tomcat是一个实现了JAVA EE标准的最小的WEB服务器,是Apache 软件基金会的Jakarta 项目中的一个核心项目,由Apache.Sun 和其他一些公司及个人共同开发而成.因 ...

  7. outlook使用inline style回复邮件

    Reply with inline comments within the original message text When you reply to email messages in Outl ...

  8. 【SpringBoot】 一种解决接口返回慢的方式

    前言 使用springboot开发后台代码的时候,很核心的一个功能是为前端提供接口,那么很可能你会遇到如下问题: 1. 接口里面调用的service层是第三方库或者第三方后台程序,导致访问很慢. 2. ...

  9. Python 进阶_闭包 & 装饰器

    目录 目录 闭包 函数的实质和属性 闭包有什么好处 小结 装饰器 更加深入的看看装饰器的执行过程 带参数的装饰器 装饰器的叠加 小结 装饰器能解决什么问题 小结 闭包 Closure: 如果内层函数引 ...

  10. Java学习之线程通信（多线程（Lock））--生产者消费者

    SDK1.5版本以后对synchronized的升级,其思想是:将同步和锁封装成对象,其对象中包含操作锁的动作. 代码: //1.导入包 import java.util.concurrent.loc ...