わんすけに聞いてみる EXCELっぽいHTMLテーブル 編集モードでセルアドレスが画面に表示されるようにしてみる

編集モードでセルアドレスが画面に表示されるようにしてみる

『ExcelっぽいHTMLテーブル』を作る企画

前回までのバージョンまででは、tdタグの中身をそのまま更新していたけど、そのままだとあんまり装飾できないなーと思ってInitalizeの処理でtdの中にセルアドレスのspanと内容表示用のdivを仕込むようにしてみた。
とりあえず、非表示状態で仕込んでおいてセルが編集モードになった時にセルアドレスが浮き出るようにしてみた。

・・・ちょっと邪魔くさいかなー?改良の余地はありそうですが、イメージ通りです。

わんすけのサイト上だとサンプルのスタイルが崩れてキレイに表示できないなー。

今回の更新内容

line:14のあたり、力づくで既存Tableのtdタグにposition: relative突っ込んでるあたり、

ページによってはレイアウト崩れたりしそうだなーと思いながら強行してみました。

CSSはまだ深い理解ができてないからいつも手探りなんだよなー。

ま、日々精進ですなっ!

次は、このセルアドレスで関数入力された場合に値を引き込む処理、いってみよう!

わんすけへ寄付金を送る

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

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

¥120

コメントを残す

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

Related Post

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

前回の続きから、選択中のセルを矢印キーで移動しようと思ったら セルの相対位置がわかるアドレスがないといけないなーと思いまして まさにエクセルの様なセルアドレスを振ってみようじゃないかと考えました。   &nbs […]

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

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