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 相关文章推荐
一个加载js文件的小脚本
Jun 28 Javascript
JavaScript创建对象的写法
Aug 29 Javascript
利用CSS、JavaScript及Ajax实现高效的图片预加载
Oct 16 Javascript
JS高级调试技巧:捕获和分析 JavaScript Error详解
Mar 16 Javascript
js从Cookies里面取值的简单实现
Jun 30 Javascript
JS使用post提交的两种方式
Dec 03 Javascript
AngularJS 实现弹性盒子布局的方法
Aug 30 Javascript
jQuery中的on与bind绑定事件区别实例详解
Feb 28 Javascript
使用wxapp-img-loader自定义组件实现微信小程序图片预加载功能
Oct 18 Javascript
ES6小技巧之代替lodash
Jun 07 Javascript
Vue-drag-resize 拖拽缩放插件的使用(简单示例)
Dec 04 Javascript
vue里使用create, mounted调用方法
Apr 26 Vue.js
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留言本实例代码
2010/05/09 PHP
php5.3 注意事项说明
2013/07/01 PHP
Symfony2安装第三方Bundles实例详解
2016/02/04 PHP
弹出模态框modal的实现方法及实例
2017/09/19 PHP
PHP中检查isset()和!empty()函数的必要性
2019/02/13 PHP
Laravel框架下载,安装及路由操作图文详解
2019/12/04 PHP
张孝祥JavaScript学习阶段性总结(2)--(X)HTML学习
2007/02/03 Javascript
window.open的页面如何刷新(父页面)上层页面
2012/12/28 Javascript
移动设备web开发首选框架:zeptojs介绍
2015/01/29 Javascript
简述jQuery ajax的执行顺序
2016/01/05 Javascript
JSON简介以及用法汇总
2016/02/21 Javascript
移动端js触摸事件详解
2016/09/18 Javascript
Bootstrap 响应式实用工具实例详解
2017/03/29 Javascript
详解Angular2 之 结构型指令
2017/06/21 Javascript
用vue的双向绑定简单实现一个todo-list的示例代码
2017/08/03 Javascript
Javascript快速实现浏览器系统通知
2017/08/26 Javascript
vue 虚拟dom的patch源码分析
2018/03/01 Javascript
angular 未登录状态拦截路由跳转的方法
2018/10/09 Javascript
NodeJS加密解密及node-rsa加密解密用法详解
2018/10/12 NodeJs
微信小程序HTTP接口请求封装代码实例
2019/09/05 Javascript
layui 实现表单和文件上传一起传到后台的例子
2019/09/16 Javascript
vue 路由懒加载中给 Webpack Chunks 命名的方法
2020/04/24 Javascript
[10:42]Team Liquid Vs Newbee
2018/06/07 DOTA
python paramiko模块学习分享
2017/08/23 Python
基于Python函数的作用域规则和闭包(详解)
2017/11/29 Python
Python selenium根据class定位页面元素的方法
2019/02/26 Python
python面向对象实现名片管理系统文件版
2019/04/26 Python
深入了解Python枚举类型的相关知识
2019/07/09 Python
详解python实现交叉验证法与留出法
2019/07/11 Python
关于pandas的离散化,面元划分详解
2019/11/22 Python
Python找出列表中出现次数最多的元素三种方式
2020/02/24 Python
什么是Python包的循环导入
2020/09/08 Python
python 调用Google翻译接口的方法
2020/12/09 Python
活动总结怎么写
2014/04/28 职场文书
项目验收申请报告
2015/05/15 职场文书
Python使用pandas导入csv文件内容的示例代码
2022/12/24 Python