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 相关文章推荐
基于jQuery实现的水平和垂直居中的div窗口
Aug 08 Javascript
关于jQuery新的事件绑定机制on()的使用技巧
Apr 26 Javascript
js综合应用实例简单的表格统计
Sep 03 Javascript
javascript禁用键盘功能键让右击及其他键无效
Oct 09 Javascript
javascript 上下banner替换具体实现
Nov 14 Javascript
深入浅析JavaScript函数前面的加号和叹号
Jul 09 Javascript
AngularJs directive详解及示例代码
Sep 01 Javascript
微信小程序 选择器(时间,日期,地区)实例详解
Nov 16 Javascript
Vue.js 递归组件实现树形菜单(实例分享)
Dec 21 Javascript
基于bootstrap实现多个下拉框同时搜索功能
Jul 19 Javascript
JavaScript面向对象中接口实现方法详解
Jul 24 Javascript
基于Vue sessionStorage实现保留搜索框搜索内容
Jun 01 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
重置版战役片段
2020/04/09 魔兽争霸
yii实现使用CUploadedFile上传文件的方法
2015/12/28 PHP
php使用curl详细解析及问题汇总
2016/08/11 PHP
jQuery实现倒计时按钮功能代码分享
2014/09/03 Javascript
js拆分字符串并将分割的数据放到数组中的方法
2015/05/06 Javascript
详解AngularJS控制器的使用
2016/03/09 Javascript
动态生成的DOM不会触发onclick事件的原因及解决方法
2016/08/06 Javascript
自动化测试读写64位操作系统的注册表
2016/08/15 Javascript
BootStrap中Table分页插件使用详解
2016/10/09 Javascript
JS 实现 ajax 异步浏览器兼容问题
2017/01/21 Javascript
jquery Easyui Datagrid实现批量操作(编辑,删除,添加)
2017/02/20 Javascript
jQuery实现动态显示select下拉列表数据的方法
2018/02/05 jQuery
vue实现循环切换动画
2018/10/17 Javascript
javascript数据类型中的一些小知识点(推荐)
2019/04/18 Javascript
node将geojson转shp返回给前端的实现方法
2019/05/29 Javascript
监控微信小程序中的慢HTTP请求过程详解
2019/07/05 Javascript
写给新手同学的vuex快速上手指北小结
2020/04/14 Javascript
python中for用来遍历range函数的方法
2018/06/08 Python
python验证身份证信息实例代码
2019/05/06 Python
导入tensorflow:ImportError: libcublas.so.9.0 报错
2020/01/06 Python
详解用Python爬虫获取百度企业信用中企业基本信息
2020/07/02 Python
Python通过yagmail实现发送邮件代码解析
2020/10/27 Python
UNDONE手表官网:世界领先的定制手表品牌
2018/11/13 全球购物
幼儿园长自我鉴定
2013/10/17 职场文书
法律系毕业生自荐信范文
2014/03/27 职场文书
法制宣传日活动总结
2014/04/29 职场文书
机械专业毕业生自我鉴定2014
2014/10/04 职场文书
12.4全国法制宣传日活动方案
2014/11/02 职场文书
竞聘报告优秀范文
2014/11/06 职场文书
优秀员工推荐材料
2014/12/20 职场文书
公司年夜饭通知
2015/04/25 职场文书
小组口号霸气押韵
2015/12/24 职场文书
初三英语教学反思
2016/02/15 职场文书
市语委办2016年第十九届“推普周”活动总结
2016/04/05 职场文书
Python图片验证码降噪和8邻域降噪
2021/08/30 Python
MySQL中dd::columns表结构转table过程及应用详解
2022/09/23 MySQL