editable_table.js

HTMLのtableをExcelっぽく動かせるようにしてみる企画

ブログの方で開発の進捗を実況中です。

使い方や導入方法はこちらのページにまとめておきます。

今後も開発しつづけるので現行の機能は予告なく変わっていきます。

■概要

以下の二つのモジュールをHTMLページにロードし、ページ内で編集可能にしたいテーブルのクラスに『class=”editable-table”』を追加すると、TDタグのセル内容が編集可能になるっていうライブラリを作ってます。
※ このライブラリはjqueryを使用しています。

editable-table.js

editable-table.css

■サンプル

■使い方

• TDセルをクリックすると罫線が太くなって選択状態になる。
• セルをダブルクリックすると編集モードになる。(セルの左上にセルアドレスが表示されます。)
• 編集モードはフォーカスアウトで変更内容を確定。Escキーでキャンセル。
• セルを選択した状態から方向キーで選択セルの移動ができる。
• 各セルにはA1～Zn形式のExcelっぽいアドレスが付けられた状態になる。

■オプション

• tdタグにlockという属性を追加しておくとセルを保護できる。

<td lock>俺は守られている</td>

• SheetJSのFileSaver.jsとxlsx.full.min.jsを参照に加えるとテーブルのダウンロードができるようになる。
• ダウンロード有効の場合、tableタグに「export_filename="ファイル名"」という属性を持たせるとダウンロードファイル名の指定ができる。（デフォルトは、「html_table.xlsx」）
• 複数のeditable-tableがある場合は、シート分けされて保存される。tableタグに「data-sheet-name="シート名"」という属性を持たせるとダウンロードファイルの保存シート名を指定できる。

■今後の野望

• セルの範囲選択ができるようにしてみる。
• セル参照の関数を実装してみる。（四則演算、文字列結合）
• 編集モードで他のセルを選択した時、編集モードのセルが関数を書きかけてたら関数式にセルアドレスが挿入されるようにしてみる。
• セル内容が変更された以降は、ページを離れる際に警告が出る様にしてみる。
• セルのコピー＆ペースト機能を実装してみる。
• エクスポートできる機能を実装してみる。
• セル関数とか。。。条件付き書式とか。。。入力規則とか。。。

とまぁ、思いつくままにやってみたいことつらつら書いてみましたが、着手順は気分ですし、今後も増えていくかと思います。

わんすけは、日々勉強して進化しているのですっ！！