jQuery 实现table隔行变色
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> </head> <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script type="text/javascript"> //隔行变色 $(function(){ $("tr:odd").addClass("odd"); $("tr:even").addClass("even"); //点击变色 $("td").click( function () { $(this).addClass("selected"); }); //光标移入移出变色 $("td").mouseover(function(){ $(this).addClass("hd"); }).mouseout(function(){ $(this).removeClass("hd"); }); }); </script> <style> .even{ background-color:red; } .odd{ background-color:blue; } .selected{ background-color:fuchsia; } .hd{ background-color:yellow; } </style> <body> <table border="1" width="100%"> <tr> <td>书名</td> <td>作者</td> <td>点击量</td> </tr> <tr> <td>圣墟</td> <td>辰东</td> <td>10万</td> </tr> <tr> <td>飞剑问道</td> <td>我吃西红柿</td> <td>11万</td> </tr> <tr> <td>杀神</td> <td>逆苍天</td> <td>22万</td> </tr> <tr> <td>龙王传说</td> <td>唐家三少</td> <td>18万</td> </tr> <tr> <td>斗破苍穹</td> <td>天蚕拖豆</td> <td>1万</td> </tr> </table> </body> </html>
浙公网安备 33010602011771号