Jquery学习之路(二) 实现table样式的设定
上一篇jquery实现checkbox的全选，得到了一些朋友的建议，其中插件的定义我的确不太清楚，也闹了个笑话，有些朋友建议我去看《锋利的Jquery》，说实话正在看了。由于正在学习中，我就想把项目中经常要用的jquery效果自己写成通用方法，可以在大家的帮助下完善这些方法，也可以让不会的了解到一种做法，最后
形成自己的Jquery 方法库，方便以后的使用，这些例子都是我自己写的，没有参考，所以有很多地方需要改进。
1：为什么要写这个方法
在项目中，一些table都要设置样式，为了样式的美观，表头是一个样式，奇数行一个样式，偶数行一个样式。当鼠标经过的时候颜色变化，鼠标离开时颜色恢复,这就有了这样方法。
2：实现过程
js文件xs_table_css.js
//****************************************************************************************
//作者：轻狂书生
//博客地址：http://www.cnblogs.com/xiaoshuai1992
//create: 2014/1/17
//功能：实现table颜色变化
//使用方法：引用jquery,设置table的样式为变量xs_table_css的值
//***************************************************************************************** $(document).ready(function () {
var xs_table_css = "xs_table"; //获取table的css
var xs_table_th_css = "xs_table_th"; //table 的th样式
var xs_table_even_css = "xs_table_even"; //table的偶数行css
var xs_table_odd_css = "xs_table_odd"; //table的奇数行css
var xs_table_select_css = "xs_table_select"; //table选择行的样式
var xs_table = "table." + xs_table_css;
$(xs_table).each(function () {
$(this).children().children().has("th").addClass(xs_table_th_css); //表头
var tr_even = $(this).children().children(":even").has("td"); //数据偶数行
var tr_odd = $(this).children().children(":odd").has("td"); //数据奇数行
tr_even.addClass(xs_table_even_css);
tr_odd.addClass(xs_table_odd_css);
tr_even.mouseover(function () {
$(this).removeClass(xs_table_even_css);
$(this).addClass(xs_table_select_css);
});
tr_even.mouseout(function () {
$(this).removeClass(xs_table_select_css);
$(this).addClass(xs_table_even_css);
});
tr_odd.mouseover(function () {
$(this).removeClass(xs_table_odd_css);
$(this).addClass(xs_table_select_css);
});
tr_odd.mouseout(function () {
$(this).removeClass(xs_table_select_css);
$(this).addClass(xs_table_odd_css);
}); }); });
样式文件xs_table.css
.xs_table
{
}
.xs_table_th
{
height: 50px;
background-color: #C0C0C0;
}
.xs_table_even
{
height: 50px;
background-color: #F0F0F0;
} .xs_table_odd
{
height: 50px;
background-color: #FFFFFF;
}
.xs_table_select
{
height: 50px;
background-color: #D9D9D9;
}
页面文件xs_table_css.htm
<!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>
<title></title>
<link href="xs_table.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js" type="text/javascript">
</script>
<script src="xs_table_css.js" type="text/javascript"></script>
</head>
<body>
<table class="xs_table" width="800px">
<tbody >
<tr><th>headone</th><th>headTwo</th></tr>
<tr><td>第一行</td><td></td></tr>
<tr><td>第二行</td><td></td></tr>
<tr><td>第三行</td><td></td></tr>
<tr><td>第四行</td><td></td></tr>
</tbody>
</table>
<br />
<br />
<table class="xs_table" width="800px">
<tr><th>headone</th><th>headTwo</th></tr>
<tr><td>第一行</td><td></td></tr>
<tr><td>第二行</td><td></td></tr>
<tr><td>第三行</td><td></td></tr>
<tr><td>第四行</td><td></td></tr>
</table>
</body>
</html>
3：方法说明
（1）mouseover和mouseout要先移除上次的css，不然会出现样式叠加
（2）找tr时注意tbody,虽然页面上没有tbody标签，但是默认会有这个子元素
（3）奇偶行要去除th，只找td的
4：下载地址：实现table样式设定.zip
谢谢大家的指正，一起学习，一起进步了
Jquery学习之路(二) 实现table样式的设定的更多相关文章
- jQuery学习之路（1）-选择器
▓▓▓▓▓▓ 大致介绍 终于开始了我的jQuery学习之路!感觉不能再拖了,要边学习原生JavaScript边学习jQuery jQuery是什么? jQuery是一个快速.简洁的JavaScript ...
- jQuery插件之路(二)——轮播
还记得以前刚接触前端的时候,浏览各大网站,很多都少不了的有个轮播的效果,那个时候自己是一个彻彻底底的小白,想着这些图片滚动起来还真是有意思,是什么让这些图片在一个方向上连续的滚动呢.后来慢慢的接触多了 ...
- Redis——学习之路二（初识redis服务器命令）
上一章我们已经知道了如果启动redis服务器,现在我们来学习一下,以及如何用客户端连接服务器.接下来我们来学习一下查看操作服务器的命令. 服务器命令: 1.info——当前redis服务器信息 s ...
- jQuery 源码解析(二十六) 样式操作模块 样式详解
样式操作模块可用于管理DOM元素的样式.坐标和尺寸,本节讲解一下样式相关,样式操作通过jQuery实例的css方法来实现,该方法有很多的执行方法,如下: css(obj) ;参数 ...
- jQuery 源码解析(二十九) 样式操作模块 尺寸详解
样式操作模块可用于管理DOM元素的样式.坐标和尺寸,本节讲解一下尺寸这一块 jQuery通过样式操作模块里的尺寸相关的API可以很方便的获取一个元素的宽度.高度,而且可以很方便的区分padding.b ...
- JS与Jquery学习笔记（二）
一. JS 的面向对象 JS没有类,其类就用function来代替如下所示: function Cat(name, color){ this.name=name; this.color=color; ...
- jQuery学习之路（8）- 表单验证插件-Validation
▓▓▓▓▓▓ 大致介绍 jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的验证方法,包括 ...
- jQuery学习之路（7）- 用原生JavaScript实现jQuery的某些简单功能
▓▓▓▓▓▓ 大致介绍 学习了妙味,用原生的JavaScript实现jQuery中的某些部分功能 定义自己的函数库lQuery ▓▓▓▓▓▓ $()选择器的实现 jQuery是面向对象的,所以自己编写 ...
- jQuery学习之路（6）- 简单的表格应用
▓▓▓▓▓▓ 大致介绍 在CSS技术之前,网页的布局基本都是依靠表格制作,当有了CSS之后,表格就被很多设计师所抛弃,但是表格也有他的用武之地,比如数据列表,下面以表格中常见的几个应用来加深对jQue ...
随机推荐
- Java算法求最大最小值,倒序,冒泡排序,斐波纳契数列，日历一些经典算法
一,求最大,最小值 int[] a={21,31,4,2,766,345,2,34}; //这里防止数组中有负数,所以初始化的时候给的数组中的第一个数. int max=a[0]; int min=a ...
- jquery取值赋值
("#A").val("1") id为A的值就是1了 jQuery中都这样,赋值的时候作为参数传给函数,和单纯的js有区别,像 $("#A" ...
- StaticBox布局管理器
wx.StaticBoxSizer构造方法如下: wx.StaticBoxSizer(box,orient = HORIZONTAL) box 是静态框对象,orient参数是布局方向 wx.HOR ...
- shell之route命令相关
使用下面的 route 命令可以查看 Linux 内核路由表. # route Destination Gateway Genmask Flags Metric Ref Use Iface 192.1 ...
- iPhone新建项目不能全屏
上个周做项目的时候,发现新建了一个项目不能全屏.伤透了我的脑筋,然后又请教了团队里其他两个大牛帮我搞定了这个问题. 虽然是搞定了,但也看的出大牛也是云里雾里.歪打正着解决的. 今天又想新做个项目,这个 ...
- BZOJ2763 [JLOI2011]飞行路线 【分层图 + 最短路】
题目 Alice和Bob现在要乘飞机旅行,他们选择了一家相对便宜的航空公司.该航空公司一共在n个城市设有业务,设这些城市分别标记为0到n-1,一共有m种航线,每种航线连接两个城市,并且航线有一定的价格 ...
- 【CZY选讲·Triangle】
题目描述 长度为的铁丝,你可以将其分成若干段,并把每段都折成一个三角形.你还需要保证三角形的边长都是正整数并且三角形两两相似,问有多少种不同的分法. 数据范围 1≤≤10^6 题解: ①相 ...
- mysql的乐观锁和悲观锁
悲观锁与乐观锁是两种常见的资源并发锁设计思路,也是并发编程中一个非常基础的概念.本文将对这两种常见的锁机制在数据库数据上的实现进行比较系统的介绍. 悲观锁(Pessimistic Lock) 悲观锁的 ...
- 3.6 Lucene基本检索+关键词高亮+分页
3.2节我们已经运行了一个Lucene实现检索的小程序,这一节我们将以这个小程序为例,讲一下Lucene检索的基本步骤,同时介绍关键词高亮显示和分页返回结果这两个有用的技巧. 一.Lucene检索的基 ...
- HDU1520 树形DP入门
Anniversary party Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others ...