【snippet】テーブルを編集できるようにする（Edit in Place） _shimizu 关注 2014-03-25 18:23:43 许可证： 详见代码注释 派生2 收藏1 浏览量15716 播放 停止 刷新 全屏查看 智能机大小查看 派生树 Readme JavaScript 36 行 HTML 29 行 CSS 31 行 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; } 请使用支持内嵌框架的浏览器 到jsdo.it games上查看 作者信息 分享 嵌入博客 QR二维码 标签 下载 成功！ 描述 是怎样的游戏？ jQueryを使ってテーブルのセルをクリックしたときに編集できるようにする（Edit in Place） http://shimz.me/blog/?p=1505 控制设备 智能机遥控器 jsdo.it WebSocket Controller» 鼠标 键盘 触摸设备 全屏 有效 无效 从jsdo.it games上删除 提交 作者信息 _shimizu URLhttp://shimz.me/blog/ 群馬県高崎市在住のエンジニア 。サーバ管理したり、自動組版のスクリプト組んだり、サイト作ったりして生きてます。データビジュアライゼーションとオープンデータにハマってます。Webデザイン ＆ JS勉強中。 I luv javascript! Tweet 默认面板 自动播放 截图 Readme JavaScript HTML CSS 部件尺寸 宽度： px 高度： px 部件代码 <script type="text/javascript" src="http://jsdo.it/blogparts/k6LX/js"></script> jquery library&test 讨论区 试着提些关于代码的问题！ Tags jquery library&test Favorite by Takaaki.Tana Forked 並べ替え 新着 閲覧回数 お気に入り数 フォーク数 forked: 【snippet】テーブルを編集できるように nakakaz11 00 515 36/29/31 jquery library&test forked: 【snippet】テーブルを編集できるように Kolawole.Aye 00 464 30/30/1 jquery
