jQuery轻松实现表格的隔行变色和点击行变色的实例代码
更新时间:2016年05月09日 15:36:02 投稿:jingxian
下面小编就为大家带来一篇jQuery轻松实现表格的隔行变色和点击行变色的实例代码。小编觉得挺不错的,现在分享给大家,也给大家做个参考,一起跟随小编过来看看吧
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轻松实现表格的隔行变色和点击行变色的实例代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
Juqery Html(),append()等方法的Bug解决方法
标题中说是jquery中的Bug,只是个人这么认为,先申明一下!2010-12-12基于jquery的弹出提示框始终处于窗口的居中位置(类似于alert弹出框的效果)
之前写的代码,都是在当前窗口位于居中,可是一旦窗口缩小或者放大都不是位于居中的位置了,但是一直想写的一个类似于alert弹出窗口的效果。2011-09-09
最新评论