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实现的动态添加表单元素input,button等(appendChild)
Nov 24 Javascript
javascript学习笔记(十七) 检测浏览器插件代码
Jun 20 Javascript
左右悬浮可分组的网站QQ在线客服代码(可谓经典)
Dec 21 Javascript
Jquery为a标签的href赋值实现代码
May 03 Javascript
在JS中解析HTML字符串示例代码
Apr 16 Javascript
JavaScript中神奇的call()方法
Mar 12 Javascript
jquery $.trim()去除字符串空格的实现方法【附图例】
Mar 30 Javascript
jQuery新窗口打开外链接
Jul 21 Javascript
javascript实现用户点击数量统计
Dec 25 Javascript
JavaScript的六种继承方式(推荐)
Jun 26 Javascript
Vue的路由及路由钩子函数的实现
Jul 02 Javascript
Openlayers学习之加载鹰眼控件
Sep 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
受疫情影响 动画《Re从零开始的异世界生活》第二季延期至7月
2020/03/10 日漫
PHP MemCached高级缓存配置图文教程
2010/08/05 PHP
zend api扩展的php对象的autoload工具
2011/04/18 PHP
php中session退出登陆问题
2014/02/27 PHP
PHP 输出缓冲控制(Output Control)详解
2016/08/25 PHP
JAVASCRIPT 对象的创建与使用
2021/03/09 Javascript
Chrome Form多次提交表单问题的解决方法
2011/05/09 Javascript
2014最热门的JavaScript代码高亮插件推荐
2014/11/25 Javascript
js代码实现随机颜色的小方块
2015/07/30 Javascript
Jquery promise实现一张一张加载图片
2015/11/13 Javascript
JavaScript中的跨浏览器事件操作的基本方法整理
2016/05/20 Javascript
input 标签实现输入框带提示文字效果(两种方法)
2017/10/09 Javascript
Node之简单的前后端交互(实例讲解)
2017/11/14 Javascript
vue使用Element组件时v-for循环里的表单项验证方法
2018/06/28 Javascript
node.js遍历目录的方法示例
2018/08/01 Javascript
vue集成百度UEditor富文本编辑器使用教程
2018/09/21 Javascript
微信小程序实现卡片层叠滑动效果
2019/06/21 Javascript
Python实现的直接插入排序算法示例
2018/04/29 Python
python 统计列表中不同元素的数量方法
2018/06/29 Python
Python常用模块logging——日志输出功能(示例代码)
2019/11/20 Python
Python中url标签使用知识点总结
2020/01/16 Python
python GUI计算器的实现
2020/10/09 Python
CSS3新增布局之: flex详解
2020/06/18 HTML / CSS
法国美发器材和产品购物网站:Beauty Coiffure
2016/12/05 全球购物
Charlotte Tilbury英国官网:英国彩妆品牌
2017/05/26 全球购物
IRO美国官网:法国服装品牌
2018/03/06 全球购物
法国隐形眼镜网站:VisionDirect.fr
2020/03/03 全球购物
财务人员个人自荐信范文
2013/09/26 职场文书
新闻学专业应届生求职信
2013/11/08 职场文书
医学实习生自我鉴定
2013/12/12 职场文书
父亲的菜园教学反思
2014/02/13 职场文书
小学生环保演讲稿
2014/04/25 职场文书
十七岁的单车观后感
2015/06/12 职场文书
国富论读书笔记
2015/06/26 职场文书
司法廉洁教育心得体会
2016/01/20 职场文书
解决MySQL Varchar 类型尾部空格的问题
2022/04/06 MySQL