Jquery学习之路(二) 实现table样式的设定
2014-01-17 11:59
260 查看
上一篇jquery实现checkbox的全选,得到了一些朋友的建议,其中插件的定义我的确不太清楚,也闹了个笑话,有些朋友建议我去看《锋利的Jquery》,说实话正在看了。由于正在学习中,我就想把项目中经常要用的jquery效果自己写成通用方法,可以在大家的帮助下完善这些方法,也可以让不会的了解到一种做法,最后
形成自己的Jquery 方法库,方便以后的使用,这些例子都是我自己写的,没有参考,所以有很多地方需要改进。
1:为什么要写这个方法
在项目中,一些table都要设置样式,为了样式的美观,表头是一个样式,奇数行一个样式,偶数行一个样式。当鼠标经过的时候颜色变化,鼠标离开时颜色恢复,这就有了这样方法。
2:实现过程
js文件xs_table_css.js
样式文件xs_table.css
页面文件xs_table_css.htm
3:方法说明
(1)mouseover和mouseout要先移除上次的css,不然会出现样式叠加
(2)找tr时注意tbody,虽然页面上没有tbody标签,但是默认会有这个子元素
(3)奇偶行要去除th,只找td的
4:下载地址:实现table样式设定.zip
谢谢大家的指正,一起学习,一起进步了
形成自己的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>111111111</td></tr> <tr><td>第二行</td><td>222222222</td></tr> <tr><td>第三行</td><td>333333333</td></tr> <tr><td>第四行</td><td>444444444</td></tr> </tbody> </table> <br /> <br /> <table class="xs_table" width="800px"> <tr><th>headone</th><th>headTwo</th></tr> <tr><td>第一行</td><td>111111111</td></tr> <tr><td>第二行</td><td>222222222</td></tr> <tr><td>第三行</td><td>333333333</td></tr> <tr><td>第四行</td><td>444444444</td></tr> </table> </body> </html>
3:方法说明
(1)mouseover和mouseout要先移除上次的css,不然会出现样式叠加
(2)找tr时注意tbody,虽然页面上没有tbody标签,但是默认会有这个子元素
(3)奇偶行要去除th,只找td的
4:下载地址:实现table样式设定.zip
谢谢大家的指正,一起学习,一起进步了
相关文章推荐
- Jquery 实现table样式的设定
- Jquery 实现table样式的设定
- 实现table样式的设定
- Swift - 实现tableView单选系统样式
- TABLE边框样式的简单实现
- 在一个tableView 中需要自定义多种样式的cell(两种或三种),通常你如何实现,说说思路即可?
- 用jQuery实现鼠标在table上移动进行样式变化
- 关于 table td 实现细边框的样式
- Jquery实现的table最后一行添加样式的代码
- Jquery实现的table最后一行添加样式的代码
- 利用ul li 标签实现table表格的效果 (li内容超出ul设定的宽度时不换行)
- 用jQuery实现鼠标在table上移动进行样式变化
- js实现table导出Excel,保留table样式
- XE7下修改FMX.Grid.pas解决Grid列头与文本内容的样式设定,实现标题栏文字居中,内容的文本可右对齐。
- 求一段CSS样式代码;要求是Table的标签样式,实现Table标签奇数行显示一个颜色;偶数行显示另外一种颜色
- 样式表达式实现交替显示table行颜色
- Swift - 实现tableView单选系统样式
- IPhone开发中tableview cell的气泡样式的实现
- 样式表达式实现交替显示table行颜色
- tableview 为某个特定section设定样式