【jquery】表のセルを選択可能にする
excelの表みたいに「いまここを選んでますよ」というのを表示する機能を
HTMLの表で実現する方法をまとめておきます。
今回は一つのセルだけ選択できるようにしたいと思います。
これを実現するためにはざっくり次の2つの処理が必要になります。
- クリックしたセルが何かしらのアクションをする(色が変わるなど)
- セルAを選択した状態でセルBを押すと、Bが選択された状態になり
Aは選択されていない状態に戻る
こちらをjqueryで実装すると次のような感じになると思います。
ダブルクリックされた<td>のidをselectedTdに格納しておき、色変更などのアクションをさせます。
次に他のtdがダブルクリックされたときはselectedTdに、一つ前に選択されていたtdのidが格納されています。
この値を使って選択前の状態を復元することで、excelのようなセル選択が可能になります。