用简洁的jQuery方法toggleClass实现隔行换色
更新时间:2014年10月22日 17:30:42 投稿:whsnow
这篇文章主要介绍了用简洁的jQuery方法toggleClass实现隔行换色,很简单,但很实用,需要的朋友可以看看
脚本之家 / 编程助手:解决程序员“几乎”所有问题!
脚本之家官方知识库 → 点击立即使用
今天用一种简洁的方法toggleClass()实现了隔行换色:代码如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 | <!DOCTYPE HTML> <html> <head> <meta charset= "utf-8" > <title>隔行换色</title> <script src= "js/jquery-1.4.2.min.js" ></script> <style type= "text/css" > body,table,td, { font-family:Arial, Helvetica, sans-serif; font-size:12px; } .h { background: #f3f3f3; color: #000; } .c { background: #ebebeb; color: #000; } </style> </head> <body> <div id= "aaa" > <form> <table id= "table" width= "50%" border= "0" cellpadding= "3" cellspacing= "1" > <tr> <td width= "30" align= "center" ><input type= "checkbox" name= "checkbox" class= "check1" value= "checkbox" /></td> <td>蓝枫前端</td> <td>蓝枫前端</td> </tr> <tr> <td align= "center" ><input type= "checkbox" name= "checkbox" class= "check1" value= "checkbox" /></td> <td>蓝枫前端</td> <td>蓝枫前端</td> </tr> <tr> <td align= "center" ><input type= "checkbox" name= "checkbox" class= "check1" value= "checkbox" /></td> <td>蓝枫前端</td> <td>蓝枫前端</td> </tr> <tr> <td align= "center" ><input type= "checkbox" name= "checkbox" class= "check1" value= "checkbox" /></td> <td>蓝枫前端</td> <td>蓝枫前端</td> </tr> <tr> <td align= "center" ><input type= "checkbox" name= "checkbox" class= "check1" value= "checkbox" /></td> <td>蓝枫前端</td> <td>蓝枫前端</td> </tr> <tr> <td align= "center" ><input type= "checkbox" name= "checkbox" class= "check1" value= "checkbox" /></td> <td>蓝枫前端</td> <td>蓝枫前端</td> </tr> <tr> <td align= "center" ><input type= "checkbox" name= "checkbox" class= "check1" value= "checkbox" /></td> <td>蓝枫前端</td> <td>蓝枫前端</td> </tr> </table> </form> </div> <script> |
第一种比较复杂的方法:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | $( function () { $( "#table tr" ).hover( function () { $( this ).addClass( "h" ); }, function () { $( this ).removeClass( "h" ); }) $( "input" ).click( function () { if ($( this ).attr( "checked" )) { $( this ).closest( "tr" ).addClass( "c" ); } else { $( this ).closest( "tr" ).removeClass( "c" ); } }) }) |
第二种比较简单的方法:
toggleClass() 对设置或移除被选元素的一个或多个类进行切换。
该方法检查每个元素中指定的类。如果不存在则添加类,如果已设置则删除之。这就是所谓的切换效果。
不过,通过使用 "switch" 参数,您能够规定只删除或只添加类。
1 2 3 4 5 6 7 8 9 10 11 12 13 | $( function (){ $( "#table tr" ).hover( function (){ $( this ).toggleClass( "h" ); }) $( "input" ).click( function (){ var d = $( this ); d.closest( 'tr' ).toggleClass( "c" ,d.attr( "checked" )) ; }) }) </script> </body> </html> |
微信公众号搜索 “ 脚本之家 ” ,选择关注
程序猿的那些事、送书等活动等着你
相关文章
jQuery Json数据格式排版高亮插件json-viewer.js使用方法详解
这篇文章主要为大家详细介绍了jQuery Json数据格式排版高亮插件json-viewer.js的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下2017-06-06
最新评论