jQueryを使ってテーブルのセルをクリックしたときに編集できるようにする（Edit in Place）

画面遷移を行わずに、その場でDOM要素を編集できる機能を「inplace editor」とか言うらしいです。
プラグインを使う方が簡単なのですが、作りたいものに合わせてカスタマイズするのが思うようにいかなかったので、自分で書いてみました。

<table id="edit-table">
    <tr>
    <th>要素１</th>
    <th>要素２</th>
    <th>要素３</th>
    </tr>
    <tr>
        <td>1</td><td>hoge</td><td>hoge</td>
    </tr>
    <tr>
        <td>2</td><td>hello</td><td>world</td>
    </tr>
    <tr>
        <td>3</td><td></td><td></td>
    </tr>
</table>

<tr>

</tr>

<tr>

</tr>

<tr>

<td>2</td><td>hello</td><td>world</td>

</tr>

<tr>

</tr>

</table>

(function(documet){
    
    $(document).ready(function(){
    	 $("#edit-table > tbody > tr > td").click(edit_toggle());
    });


    function edit_toggle(){
        var edit_flag=false;
        return function(){
            if(edit_flag) return;
            var $input = $("<input>").attr("type","text").val($(this).text());
            $(this).html($input); 
            
            $("input", this).focus().blur(function(){
                save(this);
                $(this).after($(this).val()).unbind().remove();
                edit_flag = false;
            });
            edit_flag = true;
        }
    }    
    
    function save(elm){
        alert("「"+$(elm).val()+"」を保存しました"); //保存する処理をここに書く
    }
})(document);

(function(documet){

$(document).ready(function(){

$("#edit-table > tbody > tr > td").click(edit_toggle());

});

function edit_toggle(){

var edit_flag=false;

return function(){

if(edit_flag) return;

var $input = $("<input>").attr("type","text").val($(this).text());

$(this).html($input);

$("input", this).focus().blur(function(){

save(this);

$(this).after($(this).val()).unbind().remove();

edit_flag = false;

});

edit_flag = true;

}

function save(elm){

alert("「"+$(elm).val()+"」を保存しました"); //保存する処理をここに書く

}

})(document);

pタグやhタグなど、table以外の要素にも編集機能を付けられます。

サンプル

投稿者: shimizu