ylbtech-jQuery:jQuery学习 |
jQuery:1.5.4.3,表格变色(单击行,把当行的单选按钮(radio)设为选中状态,并应用当前样式) HTML代码返回顶部 |
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> .even { background-color: Gray; } /*奇数行样式*/ .odd { background-color: Lime; } /*偶数行样式*/ .selected { background-color: Yellow; } </style> <script src="js/jquery-1.6.1.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $("tbody>tr:even").addClass("even"); /*给奇数行添加样式*/ $("tbody>tr:odd").addClass("odd"); /*偶数行添加样式*/ /*当单击表格行时,把当前设为选中状态样式 ,并把单选按钮设为选中状态*/ $("tbody>tr").click(function () { $(this).addClass('selected') .siblings().removeClass('selected') .end() .find(":radio").attr("checked", true); }); }); </script> </head> <body> <h3> 表格变色</h3> <table style="width: 300px;"> <thead> <tr> <th> </th> <th> name </th> <th> sex </th> <th> age </th> </tr> </thead> <tbody> <tr> <td> <input type="radio" name="items" /> </td> <td> rain </td> <td> male </td> <td> 23 </td> </tr> <tr> <td> <input type="radio" name="items" /> </td> <td> rain </td> <td> male </td> <td> 23 </td> </tr> <tr> <td> <input type="radio" name="items" /> </td> <td> rain </td> <td> male </td> <td> 23 </td> </tr> <tr> <td> <input type="radio" name="items" /> </td> <td> rain </td> <td> male </td> <td> 23 </td> </tr> <tbody> </table> </body> </html>
jQuery:1.5.4.3.B,效果截图返回顶部 |
本文转自ylbtech博客园博客,原文链接:http://www.cnblogs.com/ylbtech/archive/2013/01/25/2875626.html,如需转载请自行联系原作者