2014年11月19日水曜日

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

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

(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);

0 件のコメント:

コメントを投稿