| 标题 | jQuery轻松实现表格的隔行变色和点击行变色的实例代码 |
| 范文 | 下面小编就为大家带来一篇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"> <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轻松实现表格的隔行变色和点击行变色的实例代码就是小编分享给大家的全部内容了，希望能给大家一个参考 |
| 随便看 |
|
在线学习网范文大全提供好词好句、学习总结、工作总结、演讲稿等写作素材及范文模板，是学习及工作的有利工具。