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 相关文章推荐
JavaScipt基本教程之前言
Jan 16 Javascript
js鼠标滑过弹出层的定位IE6bug解决办法
Dec 26 Javascript
javascript图像处理—仿射变换深度理解
Jan 16 Javascript
js判断字符长度及中英文数字等
Mar 19 Javascript
jQuery插件imgPreviewQs实现上传图片预览
Jan 15 Javascript
jQuery EasyUI中的日期控件DateBox修改方法
Nov 09 Javascript
Angularjs使用ng-repeat中$even和$odd属性的注意事项
Dec 31 Javascript
基于Jquery Ajax type的4种类型(详解)
Aug 02 jQuery
通过jquery获取上传文件名称、类型和大小的实现代码
Apr 19 jQuery
详解使用element-ui table组件的筛选功能的一个小坑
Nov 02 Javascript
JavaScript ES6常用基础知识总结
Feb 09 Javascript
JavaScript交换变量的常用方法小结【4种方法】
May 07 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 不同编码下的字符串长度区分
2009/09/26 PHP
分享50个提高PHP执行效率的技巧
2015/12/26 PHP
PHP设计模式(七)组合模式Composite实例详解【结构型】
2020/05/02 PHP
JavaScript使用prototype定义对象类型(转)[
2006/12/22 Javascript
Js 获取HTML DOM节点元素的方法小结
2009/04/24 Javascript
JQuery上传插件Uploadify使用详解及错误处理
2010/04/27 Javascript
brook javascript框架介绍
2011/10/10 Javascript
Google Dart编程语法和基本类型学习教程
2013/11/27 Javascript
深入理解jQuery中live与bind方法的区别
2013/12/18 Javascript
jQuery实现可关闭固定于底(顶)部的工具条菜单效果
2015/11/06 Javascript
JavaScript代码实现禁止右键、禁选择、禁粘贴、禁shift、禁ctrl、禁alt
2015/11/17 Javascript
微信小程序中顶部导航栏的实现代码
2017/03/30 Javascript
原生JS实现圆环拖拽效果
2017/04/07 Javascript
JS库之Highlight.js的用法详解
2017/09/13 Javascript
实例讲解javascript实现异步图片上传方法
2017/12/05 Javascript
laravel5.3 vue 实现收藏夹功能实例详解
2018/01/21 Javascript
vue的mixins属性详解
2018/03/14 Javascript
Vue表情输入组件 微信face表情组件
2019/02/11 Javascript
[49:27]2018DOTA2亚洲邀请赛 4.4 淘汰赛 TNC vs VG 第一场
2018/04/05 DOTA
[37:02]OG vs INfamous 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
python操作xml文件示例
2014/04/07 Python
基于python log取对数详解
2018/06/08 Python
使用python读取csv文件快速插入数据库的实例
2018/06/21 Python
Python中Numpy mat的使用详解
2019/05/24 Python
PyTorch中的Variable变量详解
2020/01/07 Python
OpenCV哈里斯(Harris)角点检测的实现
2020/01/15 Python
基于python实现判断字符串是否数字算法
2020/07/10 Python
Python绘制词云图之可视化神器pyecharts的方法
2021/02/23 Python
详解CSS3伸缩布局盒模型Flex布局
2018/08/20 HTML / CSS
英国家居用品和床上用品零售商:P&B Home
2020/01/16 全球购物
资料员岗位职责
2013/11/17 职场文书
学生干部的自我评价分享
2014/01/18 职场文书
揠苗助长教学反思
2014/02/04 职场文书
党支部承诺书范文
2014/03/28 职场文书
医药公司采购员岗位职责
2014/09/12 职场文书
有关朝花夕拾的读书笔记
2015/06/29 职场文书