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 相关文章推荐
不使用中间变量,交换int型的 a, b两个变量的值。
Oct 29 Javascript
ASP.NET jQuery 实例5 (显示CheckBoxList成员选中的内容)
Jan 13 Javascript
Javascript代码在页面加载时的执行顺序介绍
May 03 Javascript
js实现鼠标经过表格行变色的方法
May 12 Javascript
JavaScript简单修改窗口大小的方法
Aug 03 Javascript
jquery SweetAlert插件实现响应式提示框
Aug 18 Javascript
JavaScript中清空数组的方法总结
Dec 02 Javascript
对Vue- 动态元素属性及v-bind和v-model的区别详解
Aug 27 Javascript
JavaScript中构造函数与原型链之间的关系详解
Feb 25 Javascript
Bootstarp在pycharm中的安装及简单的使用方法
Apr 19 Javascript
JavaScript 中判断变量是否为数字的示例代码
Oct 22 Javascript
vue Element-ui表格实现树形结构表格
Jun 07 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
根德Grundig S400/S500/S700电路分析
2021/03/02 无线电
在PHP中PDO解决中文乱码问题的一些补充
2010/09/06 PHP
五款常用mysql slow log分析工具的比较分析
2011/05/22 PHP
PHP新手用的Insert和Update语句构造类
2012/03/31 PHP
怎样使用php与jquery设置和读取cookies
2013/08/08 PHP
PHP mysql与mysqli事务使用说明 分享
2013/08/17 PHP
在Windows系统下使用PHP生成Word文档的教程
2015/07/03 PHP
php 根据URL下载远程图片、压缩包、pdf等文件到本地
2019/07/26 PHP
关于跨站脚本攻击问题
2011/12/22 Javascript
jquery Mobile入门—外部链接切换示例代码
2013/01/08 Javascript
Jquery模仿Baidu、Google搜索时自动补充搜索结果提示
2013/12/26 Javascript
JS二维数组的定义说明
2014/03/03 Javascript
jquery库或JS文件在eclipse下报错问题解决方法
2014/04/17 Javascript
js操作iframe父子窗体示例
2014/05/22 Javascript
javascript父、子页面交互技巧总结
2014/08/08 Javascript
jQuery插件datepicker 日期连续选择
2015/06/12 Javascript
Javascript BOM学习小结(六)
2015/11/26 Javascript
使用jquery.qrcode.min.js实现中文转化二维码
2016/03/11 Javascript
Bootstrap3制作搜索框样式的方法
2016/07/11 Javascript
Vuejs 用$emit与$on来进行兄弟组件之间的数据传输通信
2017/02/23 Javascript
详解vue-cli 3.0 build包太大导致首屏过长的解决方案
2018/11/10 Javascript
利用vue重构有赞商城的思路以及总结整理
2019/02/21 Javascript
每周一练 之 数据结构与算法(Stack)
2019/04/16 Javascript
Jquery动态列功能完整实例
2019/08/30 jQuery
vue 解决setTimeOut和setInterval函数无效报错的问题
2020/07/30 Javascript
Python中使用PyQt把网页转换成PDF操作代码实例
2015/04/23 Python
对python中return和print的一些理解
2017/08/18 Python
python list删除元素时要注意的坑点分享
2018/04/18 Python
Tensorflow分类器项目自定义数据读入的实现
2019/02/05 Python
python运用pygame库实现双人弹球小游戏
2019/11/25 Python
python中的数组赋值与拷贝的区别详解
2019/11/26 Python
Vans英国官方网站:美国南加州的原创极限运动潮牌
2017/01/20 全球购物
财务会计专业推荐信
2013/11/30 职场文书
社区庆八一活动方案
2014/02/02 职场文书
2015年财务个人工作总结范文
2015/05/22 职场文书
小学六一儿童节活动开幕词
2016/03/04 职场文书