わんすけに聞いてみる EXCELっぽいHTMLテーブル Tableのセルにエクセルっぽいアドレスを振って矢印キー移動してみる。

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

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

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

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

 

 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 

今日の成果の全体像

わんすけへ寄付金を送る

このサイトの情報が役に立ったなーって思う方がいらっしゃれば、

是非「わんすけに缶コーヒー1本でもご馳走する」気持ちでポチってあげて下さい?

¥120

コメントを残す

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

Related Post

セル情報を整理してキレイにダウンロードできるようにする。(xlsx.full.min.js)セル情報を整理してキレイにダウンロードできるようにする。(xlsx.full.min.js)

前回の続きです。 とりあえずダウンロードボタン仕込んだけど、余計な情報がセルに入ってたのでデータを整理してダウンロードできるようにしました。 更新内容は「ExcelっぽいHTMLテーブル」のページに反映してます。 &nb […]