2011

Feb

17

实用的jQuery表格样式(隔行换色和鼠标经过高亮并显示隐藏内容)
文章分类:XHTML相关

后台中经常会用到表格隔行换色、鼠标经过高亮显示当前行、鼠标经过显示该行的编辑和删除链接,相信童鞋们都用过这些效果,用jQuery实现这些效果灰常的简单:

一、隔行换色:

JavaScript代码
  1. $("tr:odd").addClass("tr_bg");  

 就是说将表格的偶数行添加名为tr_bg的样式,当然,tr_bg的样式就是用来表示背景色的。

二、鼠标经过高亮显示当前行:

Java代码
  1. $("tr").mouseover(  
  2.     function(){  
  3.         $(this).addClass("tr_over");  
  4.     }  
  5. );  
  6. $("tr").mouseout(  
  7.     function(){  
  8.         $(this).removeClass("tr_over");  
  9.     }  
  10. );  

鼠标经过时将该行添加名为tr_over的样式,鼠标移出时移除该样式。

三、鼠标经过显示该行的编辑和删除链接:

JavaScript代码
  1. $("tr").mouseover(  
  2.     function(){  
  3.         $(this).find(".p_none").show();  
  4.     }  
  5. );  
  6. $("tr").mouseout(  
  7.     function(){  
  8.         $(this).find(".p_none").hide();  
  9.     }  
  10. );  

原理和第二条一样。

点击此处查看演示。

本站原创,转载请标明:来自追梦博客(http://www.wuleilei.com/)

本文地址:http://www.wuleilei.com/Blog/240

相关文章

精通JavaScript jQuery (2009-06-19)

IE6中弹出层遮不住select的解决方法 (2009-08-31)

jQuery“没有权限”的解决方法 (2010-05-05)

javaScript与jquery实现锚点平滑移动 (2010-12-30)

jQuery显示与隐藏div的特效 (2011-01-12)

20个最新的jQuery效果. (2011-01-20)

jQuery滑动图片效果 (2011-01-27)

一个很不错的jQuery弹出窗口插件Facebox (2011-03-04)

jQuery实现自定义select样式 (2011-06-23)

jQuery EasyDrag轻松实现DIV的拖动 (2011-07-15)

看看他们的脚印

闲言碎语

回归原始,爱设计,爱apple。 (5月18日)

速度通知啊! (5月17日)

又是一个三岔口,即将迈出的这一步对吗? (5月16日)

文章分类

最近文章

显示 Mac OS X 10.7 Li...

iOS开发之int,NSInteger...

iOS开发之使用UIGestureRe...

iOS开发之使用lipo命令制作模拟器...

iOS开发之KVO的使用

最近评论

日志归档

友情链接

其它功能

随机标签