<!DOCTYPE html> <html lang="ja-JP"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,user-scalable=yes,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.5"> <title></title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script> $(function(){ $("#red").click(function(){ $(".odd").removeClass("blue").addClass("red"); }); $("#blue").click(function(){ $(".odd").removeClass("red").addClass("blue"); }); }); </script> <style> .red{ background-color:#FF0000; /*これらを記述するとアニメーションが加わります*/ /* -moz-transition-property:background-color; -webkit-transition-property:background-color; -o-transition-property:background-color; -ms-transition-property:background-colort; -moz-transition-duration:500ms; -webkit-transition-duration:500ms; -o-transition-duration:500ms; -ms-transition-duration:500ms; -moz-transition-timing-function:ease-in-out; -webkit-transition-timing-function:ease-in-out; -o-transition-timing-function:ease-in-out; -ms-transition-timing-function:ease-in-out; */ } .blue{ background-color:#0000FF; /*これらを記述するとアニメーションが加わります*/ /* -moz-transition-property:background-color; -webkit-transition-property:background-color; -o-transition-property:background-color; -ms-transition-property:background-colort; -moz-transition-duration:500ms; -webkit-transition-duration:500ms; -o-transition-duration:500ms; -ms-transition-duration:500ms; -moz-transition-timing-function:ease-in-out; -webkit-transition-timing-function:ease-in-out; -o-transition-timing-function:ease-in-out; -ms-transition-timing-function:ease-in-out; */ } </style> </head> <body> <input id="red" type="button" value="赤"> <input id="blue" type="button" value="青"> <table border="1"> <tr class="odd"><td>テキスト</td><td>テキスト</td><td>テキスト</td><td>テキスト</td></tr> <tr><td>テキスト</td><td>テキスト</td><td>テキスト</td><td>テキスト</td></tr> <tr class="odd"><td>テキスト</td><td>テキスト</td><td>テキスト</td><td>テキスト</td></tr> <tr><td>テキスト</td><td>テキスト</td><td>テキスト</td><td>テキスト</td></tr> <tr class="odd"><td>テキスト</td><td>テキスト</td><td>テキスト</td><td>テキスト</td></tr> <tr><td>テキスト</td><td>テキスト</td><td>テキスト</td><td>テキスト</td></tr> <tr class="odd"><td>テキスト</td><td>テキスト</td><td>テキスト</td><td>テキスト</td></tr> </table> </body> </html>