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 ...
随机推荐
- oracle 用户被锁定解锁方法
修改了用户密码,第二天过来发现用户被锁定,晚上走的时候还好好的 . alter profile DEFAULT limit FAILED_LOGIN_ATTEMPTS UNLIMITED; alter ...
- druid sqlparser使用例子
package com.alibaba.druid.bvt.sql.mysql; import java.util.List; import org.junit.Assert; import com. ...
- Unit Test Generator使用
一.环境 1.单元测试(个人理解):是通过编写测试程序检查和验证其他程序的正确性.测试单元粒度越较越易于发现问题. 2.在VS2010在编辑器右键便出现 创建“单元测试”几个字样,可是到了vs2013 ...
- 使用node构建一个自己的服务器
我们做本地服务器,经常会选择Apache.IIS或者Tomcat,当然这些最方便的算是Apache,几乎不需要配置,最多就是配置下端口,亦或者我们想不用localhost,改成其他也是可以的,只要去更 ...
- 每个套接字地址error
套接字问题 1 netstat -aon|findstr 5037 2 根据pid,查询占用端口的应用,这里的pid为 8672,查询命令如图 3 杀死对应的PID,taskkill /pid 8 ...
- flask_入门教程之一
一.教程涉及开发语言.脚本.框架.数据库等内容 Python + Flask + requests 通过命令安装:pip install flask 二.创建第一个flask脚本 一个最小的 Flas ...
- Code Blocks中配置OpenGL方法
关于在Code Blocks中配置OpenGL的方法,在网上一直没有找到实用的方法,后来在马龙师兄的帮助下终于配置成功了,现把配置过程记录如下. (1)下载codeblocks,最好是带mingw的版 ...
- Mysql DISTINCT问题
问题描述 因为要设计一个数据库表,进行一个倒序去重的操作. 例如: id Name 1 B 2 A 3 A 4 C 5 C 6 B 场景:例如说我们需要得到一个用户的搜索记录,那么肯定不会仅仅根据时间 ...
- MySQL数据库有哪些特点
MySQL数据库的特点有: 它是C和C++语言编写的.支持多个操作系统.支持多线程.为多种编程语言提供API.优化SQL算法提高了查询速度以及提供用于管理和检查数据库的管理工具 MySQL数据库 My ...
- nginx限速白名单配置
在<nginx限制连接数ngx_http_limit_conn_module模块>和<nginx限制请求数ngx_http_limit_req_module模块>中会对所有的I ...