JavaScript
jQuery

jQueryを使ってDOM要素をクリックしたときに編集できるようにする

More than 5 years have passed since last update.

jQueryを使って「inplace editor」を作る。

(function(documet){

$(document).ready(function(){
$(target_id).click(edit_togle());
});

function edit_togle(){
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).val());
$(this).after($(this).val()).unbind().remove();
edit_flag = false;
});
edit_flag = true;
}
}

function save(value){
alert("「"+value+"」を保存しました"); //保存する処理をここに書く
}
})(document);

参考

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