###前提
個人の名前やメールアドレスの表示されたマイページの作成しています。
###実現したいこと
「編集」ボタンを押すと既に入力されいてる文字が編集可能の状態になり、
「保存」ボタンを押すと内容を変更して編集完了、
「キャンセル」ボタンを押すと変更内容をキャンセルして編集前に戻す。
###試したこと
「inplace editor」で検索したコードをWebから引っ張ってきて、
いろいろと触って見ましたがうまくいっておりません。
お教えいただければ幸いです。
###該当のソースコード
javascript
1//ボタン表示の切り替え 2$(function(){ 3 $('.edit_off').each(function(){ 4 $(this).css({display:"none"}); 5 }); 6 $(".edit_on").click(function(){ 7 $(this).css({display:"none"}); 8 $(this).siblings('.edit_off').css({display:"inline"}); 9 }); 10 11 $('.edit_off').click(function(){ 12 $(this).css({display:"none"}); 13 $(this).siblings('.edit_off').css({display:"none"}); 14 $(this).siblings('.edit_on').css({display:"inline"}); 15 }); 16}); 17 18//inplace editor 19$(function(){ 20 $(".table_right td").click(edit_toggle()); 21 22 function edit_toggle(){ 23 var edit_flag=false; 24 return function(){ 25 if(edit_flag) return; 26 var $input = $("<td input>").attr("type","text").val($(this).text()); 27 $(this).html($input); 28 29 $("input", this).focus().blur(function(){ 30 save(this); 31 $(this).after($(this).val()).unbind().remove(); 32 edit_flag = false; 33 }); 34 edit_flag = true; 35 } 36 } 37});
html
1<tbody class="table_right"> 2 <tr> 3 <th scope="row">氏名</th> 4 <td><span class="name">田中 太郎</span><input type="text" name="Name" value="田中 太郎"> 5 <img src="/images/mypage/btn_edit.png" alt="編集" class="edit edit_on"> 6 <img src="/images/mypage/btn_save.png" alt="保存" class="save edit_off"> 7 <img src="/images/mypage/btn_cancel.png" alt="キャンセル" class="cancel edit_off"></td> 8 </tr> 9 </tbody> 10 </table> 11 </div>
css
1.title_right{ 2 border-left: 3px solid #ffde00; 3 width: 180px; 4 height: 34px; 5 margin-left: 180px; 6 margin-top: 18px; 7 margin-bottom: 18px; 8} 9.title_right p{ 10 font-size: 22px; 11 padding-left: 18px; 12 padding-top: 5px; 13}
回答2件
あなたの回答
tips
プレビュー