HTMLテーブルのセルを編集するjQueryサンプル

本格的なグリッドとしては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を押した時に編集をキャンセルするようにした。

JavaScriptのコードのみ引用します。

$(function() {
  $("td").dblclick(function() {
    var td = $(this), originalContent = td.text();

    td.addClass("cellEditing");
    td.data("originalContent", originalContent);
    var el = document.createElement("input"), $el = $(el);
    $el.attr({type: "text", value: originalContent});
    $el.css("fontSize", td.css("fontSize"));
    td.empty();
    td.append(el);
    $el.focus();

    $el.keypress(function(e) {
      if (e.which == 13) {
        var text = $(this), newContent = text.val(), td = text.parent();
        td.text(newContent);
        td.removeData("originalContent");
        td.removeClass("cellEditing");
      }
    });

    var resetContent = function(e) {
      var td = $(e.target).parent();
      td.text(td.data("originalContent"));
      td.removeData("originalContent");
      td.removeClass("cellEditing");
    };

    $el.keydown(function(e) {
      if (e.which == 27) {
        resetContent(e);
      }
    });

    $el.blur(resetContent);
  });
});

http://jsdo.it/hnakamur2/abAu でも試せます。セルをダブルクリックすると編集用のテキストフィールドが表示されます。

そのとき表の各列の幅が変わってしまうのがイマイチな気がするのですが、解決法がわからずそのままにしています。良い方法があれば教えてください。