本格的なグリッドとしてはSlickGridのようなライブラリを使うのが良いんでしょうがJavaScriptのファイルサイズがヘビーウェイトなのが気になります。 もっと手軽な方法はないかと思って検索するとHow to create an editable HTML table with jQueryというサンプルを見つけました。 これを元に改良してみたものを https://github.com/hnakamur/editable_html_table_example に置きました。 編集前のテキストをHTMLのdata属性に保存するようにした。 編集用のテキストフィールドを作成する際にHTMLを文字列で組み立てるのではなくdocumment.createElement()を使うようにした。 編集用のテキストフィールドの外でマウスクリックした時とESCAPEを押した時に編集をキャンセルするよ
