jQuery 实现表格变色效果
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 实现表格变色效果的更多相关文章
- jquery做表格变色效果-demo
第一步:写html代码部分: <table style="width:300px;"> <tr><td>1</td></tr& ...
- Jquery表格变色 复选框全选,反选
/*jquery静态表格变色*/ $(".tr2").mouseover(function(){ $(this).css("background"," ...
- JQuery实现隔行变色和突出显示当前行 效果
运行效果如下图: jquery关键代码: <script type="text/javascript"> //该文件为:js.js // 当鼠标移到表格上是,当前一行背 ...
- 用JQuery实现表格隔行变色和突出显示当前行
用JQuery实现表格隔行变色和突出显示当前行 上源码 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "htt ...
- jQuery中常用网页效果应用
一.常用网页效果应用 1.表单应用 表单由表单标签.表单域和表单按钮组成. 1.1单行文本框应用 例:获取和失去焦点改变样式 首先,在网页中创建一个表单,HTML代码如下 <form actio ...
- 使用jquery合并表格中相同文本的相邻单元格
一.效果 二.代码 <!DOCTYPE HTML> <html> <head> <title>Example</title> <met ...
- 基于jquery的表格动态创建,自动绑定,自动获取值
最近刚加入GUT项目,学习了很多其他同事写的代码,感觉受益匪浅. 在GUT项目中,经常会碰到这样一个问题:动态生成表格,包括从数据库中读取数据,并绑定在表格中,以及从在页面上通过jQuery新增删除表 ...
- 第七章 jQuery操作表格及其它应用
1.表格变色 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org ...
- 基于jQuery悬停图片变色放大特效
分享一款基于jQuery悬停图片变色放大特效是一款响应式鼠标悬停图片放大效果代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div style="width ...
随机推荐
- centos 6.5 查看发行版本
cat /etc/redhat-release 其他发行版 lsb_release -a
- JS 判断undefined
tax !== underfined underfined 是判断的是类型的结果, 如果加typeof后是字符串类型 写法:typeof(tax) !== "underfined" ...
- paper 166:梯度下降法及其Python实现
参考来源:https://blog.csdn.net/yhao2014/article/details/51554910 梯度下降法(gradient descent),又名最速下降法(steepes ...
- ThinkPHP5在PHP7以上使用QueryList4, ThinkCMF在PHP5中使用QueryList3教程
QueryList 是一款用于网页采集爬虫的框架,官方最新版本为QueryList4,QueryList4版本只能在PHP7以上使用: 在PHP7以上环境中,如何在ThinkPHP5中使用QueryL ...
- appium 安装
1.npm安装: cmd——cnpm install -g appium 卸载: cmd——npm uninstall -g appium 2.下载安装包安装: Appium server: 1. A ...
- BZOJ 4399: 魔法少女LJJ(线段树)
传送门 解题思路 出题人真会玩..操作\(2\)线段树合并,然后每棵线段树维护元素个数和.对于\(6\)这个询问,因为乘积太大,所以要用对数.时间复杂度\(O(nlogn)\) 代码 #include ...
- Qt文件夹遍历
void FindFile(const QString &_filepath) { QDir dir(_filepath); for each (QFileInfo mfile in dir. ...
- ExecutorException: A query was run and no Result Maps were found for the Mapped Statement ‘com.win.mall.dao.CartMapper.test’. It’s likely that neither a Result Type nor a Result Map was specified.
ExecutorException: A query was run and no Result Maps were found for the Mapped Statement 'com.win.m ...
- Oracle 11g 体系结构 --SGA PGA 前后台进程
Oracle服务器主要由实例.数据库.程序全局区.前台进程 实例:用来提供管理数据库的功能 数据库:由Oracle数据库文件组成,用来存储系统数据 ;一般有:数据文件.控制文件.重做日志文件 而实例可 ...
- JDK 与 JRE
JDK就是Java Development Kit.简单的说JDK是面向开发人员使用的SDK,它提供了Java的开发环境和运行环境.SDK是Software Development Kit 一般指软件 ...