【snippet】テーブルを編集できるようにする（Edit in Place） _shimizu Follow 2014-03-25 18:23:43 License: Refer to code comments Fork2 Fav1 View15714 Play Stop Reload Fullscreen Smart Phone Fork tree Readme JavaScript 36 lines HTML 29 lines CSS 31 lines jQueryを使ってテーブルのセルをクリックしたときに編集できるようにする（Edit in Place） http://shimz.me/blog/?p=1505 【snippet】テーブルを編集できるようにする（Edit in Place） jQuery v1.8.0 (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 = $("<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> セルをクリックすると値を編集できます。<br> フォーカスが外れると保存されます。 </p> <table id="data-list"> <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> <br> <br> <p> テーブル以外の要素でも編集可能にできます。 </p> <h3>click!</h3> 【snippet】テーブルを編集できるようにする（Edit in Place） table { 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; } jQueryを使ってテーブルのセルをクリックしたときに編集できるようにする（Edit in Place） http://shimz.me/blog/?p=1505 (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 = $("<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> セルをクリックすると値を編集できます。<br> フォーカスが外れると保存されます。 </p> <table id="data-list"> <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> <br> <br> <p> テーブル以外の要素でも編集可能にできます。 </p> <h3>click!</h3> table { 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; } use an iframe compat browser, deer Play on jsdo.it games Author Share ブログに埋め込む QR Tag Download Complete! Description What kind of game? jQueryを使ってテーブルのセルをクリックしたときに編集できるようにする（Edit in Place） http://shimz.me/blog/?p=1505 Control Device Smartphone Controllerjsdo.it WebSocket Controller» Mouse Keyboard Touch Device Fullscreen Activated Inactivated jsdo.it games から削除する Submit Author _shimizu URLhttp://shimz.me/blog/ 群馬県高崎市在住のエンジニア 。サーバ管理したり、自動組版のスクリプト組んだり、サイト作ったりして生きてます。データビジュアライゼーションとオープンデータにハマってます。Webデザイン ＆ JS勉強中。 I luv javascript! Tweet Default Panel Auto play Screenshot Readme JavaScript HTML CSS Size Width: px Height: px code <script type="text/javascript" src="http://jsdo.it/blogparts/k6LX/js"></script> jquery library&test Discussion Questions on this code? Tags jquery library&test Favorite by Takaaki.Tana Forked sort by latest page views favorite forked forked: 【snippet】テーブルを編集できるように Kolawole.Aye 00 464 30/30/1 jquery forked: 【snippet】テーブルを編集できるように nakakaz11 00 515 36/29/31 jquery library&test
