わんすけに聞いてみる EXCELっぽいHTMLテーブル,jquery HTMLのtableをExcelみたいに編集可能にしてみる。

HTMLのtableをExcelみたいに編集可能にしてみる。

jqueryの勉強してて、例えばHTMLのtableをExcelみたいにしてみたらどうだろうと思った。

まずは、Tableを編集可能にしてみるところから作ってみました。

editable-table.csseditable-table.jsを参照に追加して、

編集可能にしたい既存のTableタグにclass=”editable-table”を追加するだけで

tdタグの内容を変更可能なTableになるっていうスクリプトです。

必要な設定は、これだけ↓↓↓

このスクリプトはjqueryを使っています。

 

逆に、表中のtdタグで編集されたくないところには、lock属性を追加すれば編集不可にできます。

こんなバルーンがでて編集モードにはなりません。

 

これをベースにして、本物のExcelみたいに関数とか使えるようにして

画面上のテーブル使って簡単な集計処理とかできたら便利そーだなーとか思ったり。

これから徐々に機能拡張していこうかなと考えてます。

 

次回は、選択中のセルを方向キーで移動できるようにして、F2で編集っていうのも足してみよう。

 

サンプルHTML

editable-table.css

editable-table.js

 

わんすけへ寄付金を送る

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

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

¥120

コメントを残す

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

Related Post