jQuery轻松实现表格的隔行变色和点击行变色的实例代码


Posted in Javascript onMay 09, 2016

jQuery轻松实现表格的隔行变色和点击行变色的实例代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>使用jquery设置表格样式</title>
<style>
.even{
 background-color:red;
}
.odd{
 background-color:green;
}
.selected{
 background-color:#FF6;
}
.se{
 background-color:#666;
}
</style>
<script language="javascript" src="../../include/jquery.js"></script>
<script>
$(document).ready(function(){
 //隔行表色
 $("tr:even").addClass("even");
 $("tr:odd").addClass("odd");
 
 //点击变色 
 $("tr").toggle(
 function(){
  
  $(this).addClass("selected");
  
 },function (){

  $(this).removeClass("selected");

 }
 );

 //滑动变色
 $("tr").mouseover(function (){
 
 $(this).addClass("se"); 
 
 }).mouseout(function (){
 
 $(this).removeClass("se");
 
 });
 

 
 
 
});
</script>
</head>

<body>
<table width="500" border="1" align="center">
 <tr>
  <td></td>
  <td> </td>
  <td> </td>
  <td> </td>
 </tr>
 <tr>
  <td></td>
  <td> </td>
  <td> </td>
  <td> </td>
 </tr>
 <tr>
  <td></td>
  <td> </td>
  <td> </td>
  <td> </td>
 </tr>
 <tr>
  <td></td>
  <td> </td>
  <td> </td>
  <td> </td>
 </tr>
 <tr>
  <td></td>
  <td> </td>
  <td> </td>
  <td> </td>
 </tr>
</table>


</body>
</html>

以上这篇jQuery轻松实现表格的隔行变色和点击行变色的实例代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用javascript实现读取txt文档的脚本
Jul 20 Javascript
javascript IE中的DOM ready应用技巧
Jul 23 Javascript
JS控制文本框textarea输入字数限制的方法
Jun 17 Javascript
javascript图片滑动效果实现
Jan 28 Javascript
超漂亮的jQuery图片轮播特效
Nov 24 Javascript
JS验证 只能输入小数点,数字,负数的实现方法
Oct 07 Javascript
jQuery中delegate()方法的用法详解
Oct 13 Javascript
JavaScript通过filereader接口读取文件
May 10 Javascript
layer弹窗插件操作方法详解
May 19 Javascript
Angularjs自定义指令Directive详解
May 27 Javascript
JS时间控制实现动态效果的实例讲解
Jul 31 Javascript
vue实现编辑器键盘抬起时内容跟随光标距顶位置向上滚动效果
May 28 Javascript
jquery实现表格中点击相应行变色功能效果【实例代码】
May 09 #Javascript
JavaScript中的prototype原型学习指南
May 09 #Javascript
jQuery+CSS实现一个侧滑导航菜单代码
May 09 #Javascript
jQuery实现点击按钮文字变成input框点击保存变成文字
May 09 #Javascript
jQuery代码实现表格中点击相应行变色功能
May 09 #Javascript
AngularJS控制器继承自另一控制器
May 09 #Javascript
如何使用AngularJs打造权限管理系统【简易型】
May 09 #Javascript
You might like
推荐php模板技术[转]
2007/01/04 PHP
php 发送带附件邮件示例
2014/01/23 PHP
zf框架的registry(注册表)使用示例
2014/03/13 PHP
ThinkPHP公共配置文件与各自项目中配置文件组合的方法
2014/11/24 PHP
浅析php适配器模式(Adapter)
2014/11/25 PHP
php实现的数字验证码及数字运算验证码
2015/07/30 PHP
PHP判断一个数组是另一个数组子集的方法详解
2017/07/31 PHP
PHP date()格式MySQL中插入datetime方法
2019/01/29 PHP
Thinkphp5框架使用validate实现验证功能的方法
2019/08/27 PHP
php使用event扩展的io复用测试的示例
2020/10/20 PHP
让您的菜单不离网站
2006/10/03 Javascript
js之WEB开发调试利器:Firebug 下载
2007/01/13 Javascript
关于用Jquery的height()、width()计算动态插入的IMG标签的宽高的问题
2010/12/08 Javascript
JavaScript高级程序设计 XML、Ajax 学习笔记
2011/09/10 Javascript
在vue中封装可复用的组件方法
2018/03/01 Javascript
node结合swig渲染摸板的方法
2018/04/11 Javascript
JSON字符串操作移除空串更改key/value的介绍
2019/01/05 Javascript
vue-cli 3.x配置跨域代理的实现方法
2019/04/12 Javascript
ES6中new Function()语法及应用实例分析
2020/02/19 Javascript
[32:07]完美世界DOTA2联赛PWL S3 LBZS vs Rebirth 第一场 12.16
2020/12/17 DOTA
Python2.x与Python3.x的区别
2016/01/14 Python
python使用电子邮件模块smtplib的方法
2016/08/28 Python
python 猴子补丁(monkey patch)
2019/06/26 Python
python flask框架实现重定向功能示例
2019/07/02 Python
python3发送邮件需要经过代理服务器的示例代码
2019/07/25 Python
tensorflow通过模型文件,使用tensorboard查看其模型图Graph方式
2020/01/23 Python
python对文件的操作方法汇总
2020/02/28 Python
python中加背景音乐如何操作
2020/07/19 Python
html5的画布canvas——画出简单的矩形、三角形实例代码
2013/06/09 HTML / CSS
应届生法律求职信
2013/10/22 职场文书
妇科医生自荐信
2013/11/05 职场文书
最新自我评价范文
2013/11/16 职场文书
分厂厂长岗位职责
2013/12/29 职场文书
《花木兰》教学反思
2014/04/09 职场文书
教你怎么用Python selenium操作浏览器对象的基础API
2021/06/23 Python
【海涛解说】史上最给力比赛,挑战DOTA极限
2022/04/01 DOTA