PK•¸J¯)é´´ index.html 【snippet】テーブルを編集できるようにする(Edit in Place) - js do it

セルをクリックすると値を編集できます。
フォーカスが外れると保存されます。

要素1 要素2 要素3
1hogehoge
2helloworld
3


テーブル以外の要素でも編集可能にできます。

click!

PK•¸Jú‚ÌPbbindex.js(function(documet){ $(document).ready(function(){ $("#data-list > tbody > tr > td").click(edit_toggle()); $("h3").click(edit_toggle()); }); function edit_toggle(){ var edit_flag = false; return function(){ if(edit_flag) return; var $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); PK•¸JÕï4«øø style.csstable { border: 1px #E3E3E3 solid; border-collapse: collapse; border-spacing: 0; } table th { width:120px; padding: 5px; border: #E3E3E3 solid; border-width: 0 0 1px 1px; background: #F5F5F5; font-weight: bold; line-height: 120%; text-align: center; } table td { padding: 5px; border: 1px #E3E3E3 solid; border-width: 0 0 1px 1px; text-align: center; } input { width:95%; height:98%; margin:0px; } PK•¸J¯)é´´ ¶index.htmlPK•¸Jú‚ÌPbb¶Üindex.jsPK•¸JÕï4«øø ¶dstyle.cssPK¥ƒ