jQueryを使ってテーブルのセルをクリックしたときに編集できるようにする（Edit in Place）
投稿者shimizu投稿日:
画面遷移を行わずに、その場でDOM要素を編集できる機能を「inplace editor」とか言うらしいです。
プラグインを使う方が簡単なのですが、作りたいものに合わせてカスタマイズするのが思うようにいかなかったので、自分で書いてみました。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <tableid="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> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | (function(documet){ $(document).ready(function(){ $("#edit-table > tbody > tr > td").click(edit_toggle()); }); functionedit_toggle(){ varedit_flag=false; returnfunction(){ 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; } } functionsave(elm){ alert("「"+$(elm).val()+"」を保存しました");//保存する処理をここに書く } })(document); |
pタグやhタグなど、table以外の要素にも編集機能を付けられます。
サンプル
