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. SDOI2018凉凉记

    好久没有更博客了...因为我在颓废学习.. SDOI一轮结束了...我也该回来学地生了... 凉凉 ————————————————我是分割线———————————————— Day0 愉快感冒的Da ...

  2. 关系型数据库---MYSQL---优化

    1.为什么要进行SQL优化? 1.1 查询性能低 1.2 执行时间过长 1.3 等待时间过长 1.4 SQL写的太差(尤其是多表关联查询) 1.5 索引失效 1.6 服务器参数(缓存.线程数)设置不合 ...

  3. android android studio error

    SIMPLE: Error computing //cmake 包含的跨平台头文件或者是源文件路径出错

  4. 因为信仰,油画专业的他自学开发进击阿里技术P9

    大约在1年以前,阿里云视频云团队来了一位热心和气.爱好广泛的老干部新同学,他就是资深技术专家郝冲,花名和招,寓意“和气招财”. 有人说程序员只喜欢安静地写代码,和招偏偏一个户外运动爱好者.他擅长滑雪, ...

  5. linux 正则表达式与实践

    正则表达式基础 准备 (1)alias grep='grep --color=auto' 易于显示 (2)LC_ALL=C,字符集,设置环境变量,字符顺序 基础正则 1)^word  匹配以Word开 ...

  6. 高精度模板 洛谷Luogu P1932 A+B & A-B & A*B & A/B Problem

    P1932 A+B & A-B & A*B & A/B Problem 题目背景 这个题目很新颖吧!!! 题目描述 求A.B的和差积商余! 输入输出格式 输入格式: 两个数两行 ...

  7. (转)docker-compose安装

    转:https://blog.csdn.net/pushiqiang/article/details/78682323 https://blog.csdn.net/ericnany/article/d ...

  8. Apache + Tomcat 集群的配置

    公司最近新接了一个项目,客户要求WEB SERVER 必须是APACHE,,由于之前的项目一直都是NGINX,,无奈啊,,由于对方的IT又是在三哥的过度,经过一番的争执只能顺应三哥三姐的要求..

  9. 在RedHat中安装新字体

    安装 下载这个字体. http://pan.baidu.com/s/1c23znaS 密码:tldo 在/usr/share/fonts/truetype/, 下建立一个新的目录 YaHei Cons ...

  10. 命令连接redis

    cd到redis的bin目录 ./redis-cli -h 输入info,看是否要验证 清空所有key FLUSHALL