1行おきに色をつける&フォーカス行に色をつける
こんな感じに偶数/奇数行で色を変えたり、マウスのフォーカスがある行に色をつける方法。
HTMLはこんなん。
<table id="result" border="1"> <tr><td>name1</td><td>value1</td></tr> <tr><td>name2</td><td>value2</td></tr> <tr><td>name3</td><td>value3</td></tr> <tr><td>name4</td><td>value4</td></tr> <tr><td>name5</td><td>value5</td></tr> </table>
#result { cursor: pointer; } .evenRow { background-color: #ffffcc; } .focusRow { background-color: #ffcccc; }
んでJavascriptをこんな感じに定義。
$(document).ready(function(){ $("#result tr:even").addClass("evenRow"); $("#result tr").hover( function(){ $(this).addClass("focusRow"); },function(){ $(this).removeClass("focusRow"); }); });