Tableのセルにエクセルっぽいアドレスを振って矢印キー移動してみる。

前回の続きから、選択中のセルを矢印キーで移動しようと思ったら

セルの相対位置がわかるアドレスがないといけないなーと思いまして

まさにエクセルの様なセルアドレスを振ってみようじゃないかと考えました。

 

 

HTMLのTableセルにアドレスを振る。

まず、editable-tableクラスを持つtableタグのセルのindexで何行目・何列目を取得します。

ほんで、このrowとcolを使ってセルアドレスを作ってみる訳ですね。

エクセル風にしようとするとアルファベットのカラム識別しが若干アレですが、

関数とか使えるようにしたら、きっと見やすくなるはず、、、と思って我慢して書きました。

ほんで、生成したアドレスと行番号・列番号は連想配列にして補完しておくっと。

この時にセルの属性にもアドレスを割り振っておいてー

セルの中身(value)と表示内容(html)を別々で管理して、あとで関数の機能で使い分けようという寸法な訳だ。

アドレスと行番号・列番号のマップが手に入ったから、

相対位置でセル移動できる関数を用意する。

現在のアクティブセルのアドレスから行番号・列番号でオフセットして移動先アドレスを作って

そのアドレスがあれば、そこに選択セルを移動するっと。。。

ほんで、矢印キーのキーイベントにこのOffsetをセットしてみると。

うん。なんとなく選択したセルが矢印キーで移動できるようになりました。

今回生成したセルのアドレスを駆使して関数の実装とかやりたい訳なんですが、

怖いのは、セル指定の循環参照で起こる無限ループですかね。

エクセルでよくポップアップ見る、「循環参照の検出」について次回は考えてみることにします。

 

今日の成果の全体像

コメントを残す

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