matsukaz's blog

Agile, node.js, ruby, AWS, cocos2d-xなどなどいろいろやってます

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>

色はCSSで決めた方が楽なのでCSSの定義も。

#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");
  });
});