【jquery】表のセルを選択可能にする

excelの表みたいに「いまここを選んでますよ」というのを表示する機能を
HTMLの表で実現する方法をまとめておきます。

 

今回は一つのセルだけ選択できるようにしたいと思います。
これを実現するためにはざっくり次の2つの処理が必要になります。

  • クリックしたセルが何かしらのアクションをする(色が変わるなど)
  • セルAを選択した状態でセルBを押すと、Bが選択された状態になり
    Aは選択されていない状態に戻る

こちらをjqueryで実装すると次のような感じになると思います。

var selectedTd;
$('td').dblclick(function(){
    $(selectedTd).css('color', '#000000');
    selectedTd = '#' + $(this).attr('id')
    $(selectedTd).css('color', '#013ADF');
});

ダブルクリックされた<td>のidをselectedTdに格納しておき、色変更などのアクションをさせます。
次に他のtdがダブルクリックされたときはselectedTdに、一つ前に選択されていたtdのidが格納されています。
この値を使って選択前の状態を復元することで、excelのようなセル選択が可能になります。