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

更新时间：2016年08月20日 14:14:21 作者：xiangqian0505

这篇文章主要介绍了jQuery实现表格隔行及滑动,点击时变色的方法,可实现表格隔行变色以及鼠标滑过与点击时变色的功能,涉及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相关内容感兴趣的读者可查看本站专题：《jQuery表格(table)操作技巧汇总》、《jQuery form操作技巧汇总》、《jQuery常用插件及用法总结》、《jQuery操作json数据技巧汇总》、《jQuery扩展技巧总结》、《jQuery拖拽特效与技巧总结》、《jquery中Ajax用法总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》

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

您可能感兴趣的文章:

基于jquery扩展漂亮的下拉框可以二次修改
以往我在使用下拉框控件老是为了样式丑陋而烦恼，现在分享这个控件，喜欢的朋友可以进行二次修改，达到你想要的效果
2013-11-11
jquery网页元素拖拽插件效果及实现
效果说明：配合已有css样式，载入插件后，网页元素可以随意在窗口内拖拽，设置了原位置半透明和拖拽半透明的效果选项，可根据需要选择。另外，当页面上有多个可拖拽元素时，可以载入另外一个用于设置z-index的插件，模拟windows窗口点击置顶效果。
2013-08-08
jQuery中get方法用法分析
这篇文章主要介绍了jQuery中get方法用法,结合实例形式分析了jQuery的ajax交互中get方法的功能、参数、使用方法与相关注意事项,需要的朋友可以参考下
2016-12-12
jquery.zclip轻量级复制失效问题
本文主要介绍了解决jquery.zclip轻量级复制失效问题的工作原理及方法。具有一定的参考价值，下面跟着小编一起来看下吧
2017-01-01
点击表单提交时出现jQuery没有权限的解决方法
击表单提交的时候会出现 jQuery 没有权限，试了一下jquery自带的json方式提交成功
2014-07-07
jQuery 获取屏幕高度、宽度的简单实现案例
下面小编就为大家带来一篇jQuery 获取屏幕高度、宽度的简单实现案例。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-05-05
jQuery中值得注意的trigger方法浅析
在前端页面开发中,我们有时候希望能自定执行一些人性化操作,比如鼠标不用点击自动就能点击等操作,利用传统的js语言需要编写复杂的代码才能实现此功能,这时候我们使用jquery的trigger()方法就能轻松实现。本文就给大家详细介绍了关于jQuery中值得注意的trigger方法。
2016-12-12
jquery如何实现点击空白处隐藏元素
这篇文章主要介绍了jquery实现点击空白处隐藏元素div等方法和实现代码的讲解，一起学习下。
2017-12-12
教你一步步用jQyery实现轮播器
相信大家应该都会看到在各大网站上都有一个轮播器的效果，于是自己不禁也想做一个，查了资料，看了轮播器的原理，慢慢的试着做了做，最终效果勉勉强强，但还是想总结出来，或许对有需要的朋友们带来一定的帮助，下面来一起看看吧。
2016-12-12
基于jquery实现复选框全选，反选，全不选等功能
本文分享一段基于jQuery实现的复选框全选、全不选、反选功能的代码，有需要的小伙伴可以参考一下
2015-10-10