CSS3セレクターでストライプテーブルを作成する
jQueryではCSS3のセレクターの表記の多くをサポートしているので、CSS3を実装していない古いブラウザーでも使用できる。
<html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $("th:nth-child(odd)").addClass("odd"); $("tr:nth-child(even)").addClass("even"); $("tr:not(:first-child)").mouseover(function(){ $(this).addClass("hover"); }).mouseout(function(){ $(this).removeClass("hover"); }); $("td").mouseover(function(){ $("td:nth-child("+($("td").index(this)%$("th").size()+1)+")").addClass("hover"); }).mouseout(function(){ $("td:nth-child("+($("td").index(this)%$("th").size()+1)+")").removeClass("hover"); }); }); </script> <style type="text/css"> table{ margin:100px auto; } .odd{ background:#444444; } th{ background:#222222; color:white; } th,td{ padding:5px; font-size:small; } .even{ background:#F2F2F2; } .hover{ background:#B2D8FF; } </style> </head> <body> <table> <tr> <th>no</th><th>Name</th><th>Phone</th> </tr> <tr> <td>1</td><td>Yamada Tarou</td><td>090-1234-5678</td> </tr> <tr> <td>2</td><td>Tanaka jirou</td><td>090-2345-6789</td> </tr> </table> </body> </html>