JavaScript & jQuery & CSS & HTML の達人

JavaScript と jQuery と CSS と HTML の使い方がわかるブログ

クリックでテーブルセルの背景色を変更する方法(jQuery版)

クリックでセルの背景色が変わる

今回は jQuery と使ってクリックするとテーブルセルの背景の色が変わるスクリプトを作ります。

動作サンプル

無色のセルをクリックすると背景色が赤色になり、赤色のセルをクリックすると無色になります。 

                   
                   
                   
                   
                   
                   

jQuery コード

コードはいたってシンプルです。クリックしたセルの背景色を取得して「無色透明」なら背景を赤色に、既に「赤色」だったら「無色透明」にしています。 

$(function() {
     $("td").click(function() {
          // 現在のセルの色が無色透明かを判別
          if($(this).css("background-color")=="rgba(0, 0, 0, 0)") {
               // 赤色に染める
               $(this).css("background-color", "red");
          } else {
               // 無色透明にする
               $(this).css("background-color", "");
          }
     });
}); 

HTML ソース

普通に6行のテーブルを作るだけで「class」も「id」もありません。ただし、この方法だとページ内にある他のテーブルすべてに反応してしまうので、テーブルが複数ある場合は「class」や「id」を付けて識別する必要があるでしょう。 

<table border="1" width="300">
<tbody>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
※途中省略(黄色の部分を5回繰り返している)
</tbody>
</table> 

終わり