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轻松实现表格的隔行变色和点击行变色的实例代码就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持查字典教程网。
【jQuery轻松实现表格的隔行变色和点击行变色的实例代码】相关文章：
★ js设置document.domain实现跨域的注意点分析
★ 体验jQuery和AngularJS的不同点及AngularJS的迷人之处