jQuery实现表格隔行及滑动,点击时变色的方法【测试可用】


Posted in Javascript onAugust 20, 2016

本文实例讲述了jQuery实现表格隔行及滑动,点击时变色的方法。分享给大家供大家参考,具体如下:

运行效果截图如下:

jQuery实现表格隔行及滑动,点击时变色的方法【测试可用】

具体代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>cssrain - demo</title>
<SCRIPT LANGUAGE="JavaScript" src="jquery-1.7.2.min.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
<!--
$(document).ready(function(){
//demo1:
//-隔行,滑动,点击 变色
$('.cssraindemo1 tbody tr:even').addClass('odd');
$('.cssraindemo1 tbody tr').hover(
 function() {$(this).addClass('highlight');},
 function() {$(this).removeClass('highlight');}
);
$('.cssraindemo1 tbody tr').click(
 function() {$(this).toggleClass('selected');}
);
//demo2:
$('.cssraindemo2 tbody tr:even').addClass('odd');
$('.cssraindemo2 tbody tr').hover(
 function() {$(this).addClass('highlight');},
 function() {$(this).removeClass('highlight');}
);
// 如果复选框默认情况下是选择的,变色.
$('.cssraindemo2 input[type="checkbox"]:checked').parents('tr').addClass('selected');
// 复选框
$('.cssraindemo2 tbody tr').click(
 function() {
  if ($(this).hasClass('selected')) {
  $(this).removeClass('selected');
  $(this).find('input[type="checkbox"]').removeAttr('checked');
  } else {
  $(this).addClass('selected');
  $(this).find('input[type="checkbox"]').attr('checked','checked');
  }
 }
);
//demo3:
$('.cssraindemo3 tbody tr:even').addClass('odd');
$('.cssraindemo3 tbody tr').hover(
 function() {$(this).addClass('highlight');},
 function() {$(this).removeClass('highlight');}
);
// 如果单选框默认情况下是选择的,变色.
$('.cssraindemo3 input[type="radio"]:checked').parents('tr').addClass('selected');
// 单选框
$('.cssraindemo3 tbody tr').click(
 function() {
  $(this).siblings().removeClass('selected');
  $(this).addClass('selected');
  $(this).find('input[type="radio"]').attr('checked','checked');
 }
);
});
//-->
</SCRIPT>
<style type="text/css">
h1  { font:bold 20px/26px Arial;}
table { border:0;border-collapse:collapse;}
td { font:normal 12px/17px Arial;padding:2px;width:100px;}
th  { font:bold 12px/17px Arial;text-align:left;padding:4px;border-bottom:1px solid #333;}
tr.odd { background:#FFF3BF;}
tr.highlight { background:#6F4DFF;}
tr.selected { background:#aaaaaa;color:#fff;}
</style>
<!-- demo1 -->
<h1>Demo1--隔行,滑动,点击 变色.</h1>
<table class="cssraindemo1">
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>暂住地</th>
</tr>
</thead>
<tbody>
<tr>
 <td>张山</td>
<td>男</td>
<td>浙江宁波</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<td>浙江杭州</td>
</tr>
<tr>
<td>王五</td>
<td>男</td>
<td>湖南长沙</td>
</tr>
<tr>
<td>找六</td>
<td>男</td>
<td>浙江温州</td>
</tr>
<tr>
<td>Rain</td>
<td>男</td>
<td>浙江杭州</td>
</tr>
<tr>
<td>MAXMAN</td>
<td>女</td>
<td>浙江杭州</td>
</tr>
</tbody>
</table>
<!-- demo2 -->
<h1>Demo2--隔行,滑动,点击 变色.+ 多选框选中的行 变色.</h1>
<table class="cssraindemo2">
<thead>
<tr>
<th> </th>
<th>姓名</th>
<th>性别</th>
<th>暂住地</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="tablechoice1" value="" /></td>
  <td>张山</td>
<td>男</td>
<td>浙江宁波</td>
</tr>
<tr>
<td><input type="checkbox" name="tablechoice1" value="" /></td>
  <td>李四</td>
<td>女</td>
<td>浙江杭州</td>
</tr>
<tr>
<td><input type="checkbox" name="tablechoice1" value="" checked/></td>
  <td>王五</td>
<td>男</td>
<td>湖南长沙</td>
</tr>
<tr>
<td><input type="checkbox" name="tablechoice1" value="" /></td>
 <td>找六</td>
<td>男</td>
<td>浙江温州</td>
</tr>
<tr>
<td><input type="checkbox" name="tablechoice1" value="" /></td>
  <td>Rain</td>
<td>男</td>
<td>浙江杭州</td>
</tr>
<tr>
<td><input type="checkbox" name="tablechoice2" value="" checked/></td>
<td>MAXMAN</td>
<td>女</td>
<td>浙江杭州</td>
</tr>
</tbody>
</table>
<!-- demo3 -->
<h1>Demo3--隔行,滑动,点击 变色.+ 单选框选中的行 变色.</h1>
<table class="cssraindemo3">
<thead>
<tr>
<th> </th>
<th>姓名</th>
<th>性别</th>
<th>暂住地</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="radio" name="tablechoice" value=""/></td>
  <td>张山</td>
<td>男</td>
<td>浙江宁波</td>
</tr>
<tr>
<td><input type="radio" name="tablechoice" value="" /></td>
  <td>李四</td>
<td>女</td>
<td>浙江杭州</td>
</tr>
<tr>
<td><input type="radio" name="tablechoice" value="" checked /></td>
  <td>王五</td>
<td>男</td>
<td>湖南长沙</td>
</tr>
<tr>
<td><input type="radio" name="tablechoice" value="" /></td>
 <td>找六</td>
<td>男</td>
<td>浙江温州</td>
</tr>
<tr>
<td><input type="radio" name="tablechoice" value="" /></td>
  <td>Rain</td>
<td>男</td>
<td>浙江杭州</td>
</tr>
<tr>
<td><input type="radio" name="tablechoice" value="" /></td>
<td>MAXMAN</td>
<td>女</td>
<td>浙江杭州</td>
</tr>
</tbody>
</table>

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
用javascript实现分割提取页面所需内容
May 09 Javascript
jquery 最简单的属性菜单
Oct 08 Javascript
Javascript 面向对象 对象(Object)
May 13 Javascript
使用Java实现简单的server/client回显功能的方法介绍
May 03 Javascript
JavaScript实现的使用键盘控制人物走动实例
Aug 27 Javascript
使用命令对象代替switch语句的写法示例
Feb 28 Javascript
js实现图片漂浮效果的方法
Mar 02 Javascript
Javascript中的数据类型之旅
Oct 18 Javascript
vue.js+boostrap项目实践(案例详解)
Sep 21 Javascript
详解vue项目首页加载速度优化
Oct 18 Javascript
详解webpack之scss和postcss-loader的配置
Jan 09 Javascript
关于在LayUI中使用AJAX提交巨坑记录
Oct 25 Javascript
JS关闭窗口时产生的事件及用法示例
Aug 20 #Javascript
JS实现漂亮的时间选择框效果
Aug 20 #Javascript
JS简单设置下拉选择框默认值的方法
Aug 20 #Javascript
jQuery多级联动下拉插件chained用法示例
Aug 20 #Javascript
浅谈angular懒加载的一些坑
Aug 20 #Javascript
javascript验证内容为数字以及长度为10的简单实例
Aug 20 #Javascript
js显示动态时间的方法详解
Aug 20 #Javascript
You might like
PHP中UNIX时间戳和日期间的转换与计算实例
2014/11/19 PHP
php将字符串全部转换成大写或者小写的方法
2015/03/17 PHP
了解PHP的返回引用和局部静态变量
2015/06/04 PHP
ThinkPHP V2.2说明文档没有说明的那些事实例小结
2015/07/01 PHP
PHP编程求最大公约数与最小公倍数的方法示例
2017/05/29 PHP
PHP+AJAX 投票器功能
2017/11/11 PHP
php弹出提示框的是实例写法
2019/09/26 PHP
thinkphp5框架前后端分离项目实现分页功能的方法分析
2019/10/08 PHP
jQuery中的常用事件总结
2009/12/27 Javascript
13个绚丽的Jquery 界面设计网站推荐
2010/09/28 Javascript
js实现图片放大缩小功能后进行复杂排序的方法
2012/11/08 Javascript
js 在定义的时候立即执行的函数表达式(function)写法
2013/01/16 Javascript
js时间日期格式化封装函数
2014/12/02 Javascript
实例详解AngularJS实现无限级联动菜单
2016/01/15 Javascript
vue 项目如何引入微信sdk接口的方法
2017/12/18 Javascript
详解如何实现一个简单的 vuex
2018/02/10 Javascript
vue-cli脚手架config目录下index.js配置文件的方法
2018/03/13 Javascript
Angular4 Select选择改变事件的方法
2018/10/09 Javascript
微信小程序实现导航栏和内容上下联动功能代码
2020/06/29 Javascript
js面试题之异步问题的深入理解
2020/09/20 Javascript
[51:29]Alliance vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
python 多线程实现检测服务器在线情况
2015/11/25 Python
Python实现视频下载功能
2017/03/14 Python
Keras设置以及获取权重的实现
2020/06/19 Python
selenium学习教程之定位以及切换frame(iframe)
2021/01/04 Python
美国花园雕像和家居装饰网上商店:Design Toscano
2019/03/09 全球购物
德国在线购买葡萄酒网站:Geile Weine
2019/09/24 全球购物
专科文秘应届生求职信
2013/11/18 职场文书
员工年终演讲稿
2014/01/03 职场文书
简短大学毕业感言
2014/01/18 职场文书
文明风采获奖感言
2014/02/18 职场文书
2014年重阳节老干部座谈会局领导发言稿
2014/09/25 职场文书
领导干部个人整改措施落实情况汇报
2014/10/29 职场文书
工厂见习报告范文
2014/10/31 职场文书
财务经理岗位职责范本
2015/04/08 职场文书
2015年敬老院工作总结
2015/05/18 职场文书