CoffeeScript – 超簡単!マウスオーバー時にテーブルの行の背景色を変える

Railsでは標準になったCoffeScriptを使って、テーブルのある行にマウスオーバーしたらその行の背景色を変える方法を紹介します。

なんとCoffeeScriptならば約4行でこの処理が書けてしまいます。ステキじゃないの、CoffeeScript!

方法
まず、前提として以下のようなテーブルがあるとします。

<table id="huna">
  <tr>
    <td>人生</td>
    <td>うまくいかない</td>
  </tr>
  <tr>
    <td>嫁に</td>
    <td>早く会いたい</td>
  <tr>
</table>

まず、マウスオーバー時の背景色を指定するCSSを準備します。

.highlight {
  background-color: #d3deff;
}

そしてCoffeScriptですが、以下のようになります。

$ ->
  # テーブルのある行にマウスオーバーしたらその行の背景色を変える
  $("table#huna tr").mouseover ->
    $(this).addClass("highlight")
  # テーブルのある行からマウスアウトしたらその行の背景色を元に戻す
  $("table#huna tr").mouseout ->
    $(this).removeClass("highlight")

以上で実装は完了です。

上記のCoffeeScriptについて簡単に解説します。
まず1行目の「$ ->」ですが、これはbodyタグのonload属性に相当します。つまり、$->以降の記述はonload時に実行されるという意味です。

3行目はjQueryのセレクタ機能でマウスオーバーされたテーブルの行を指定しています。続く4行目で該当する行(trタグ)にクラス属性を追加しています。このクラス属性を追加することによってCSSで背景色を変えているわけです。

6,7行目は、マウスアウトした場合にクラス属性を取り除いて背景色を消しています。

このようにCoffeeScriptは少ない記述で明確に処理を指定できるので、食わず嫌いにならずに活用してみることをおすすめします。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です