JQuery，Javascript按钮

Question

对不起，模糊的标题，想不到如何标题我的问题。所以我做了一个html/css表格，其中我为每行放置了一个编辑按钮。按下按钮将通过允许用户编辑内部数据将某个文本字段转换为文本输入字段;同时编辑按钮然后转换为保存按钮。编辑完成后，用户将按下保存按钮，然后文本输入字段将恢复为文本字段，并将保存按钮恢复为编辑按钮。但它不完全工作

这是我的问题，编辑里面的数据，在按下保存按钮后，里面的数据被删除并替换为：<input type= and outside the text-input field is: " /> 和保存按钮保持原样，“保存”按钮而不是回到“编辑”按钮

这里的脚本：

$(document).ready(function() { 

    // listen for email edit button click 
    $("button#edit").on('click', function() { 
     // get email inline to this edit button 
     var email = $(this).parent().siblings('td.email').html(); 
     alert(email); 

     // change button from edit to save 
     $(this).attr('id', 'save-email').html('SAVE'); 

     // change email display to input field 
     $(this).parent().siblings('td.email').html('<input type="text" id="user-email" value="' + email + '" />'); 
    }); 

    // listen for email save button click 
    $("button#save-email").on('click', function() { 

     // get new email inline to this save button 
     var newEmail = $(this).parents('tr').find($('input#user-email')).val(); 
     alert(newEmail); 

     // change input field back to display 
     $(this).parent().siblings('td.email').html(email); 

     // change button from save to edit 
     $(this).attr('id', 'edit').html('EDIT'); 
    }); 
}); 

对不起文字的墙。

Answer 1

一个实施例中的问题是，第一处理程序是在脚本中的仅一个连接。

您的JavaScript代码在页面准备就绪时执行。
那时只有第一个处理程序被附加，因为还没有元素button#save-email。当你点击保存，它是第一个处理程序再次执行，而不是一个想法！

为什么不创建两个不同的按钮并显示其中一个？

<table> 
    <tr> 
     <td class="email">myemail@domain.com</td> 
     <td> 
      <button class="btn-edit">Edit</button> 
      <button class="btn-save" style="display:none">Save</button> 
     </td> 
    </tr> 
    <tr> 
     <td class="email">myemail@domain.com</td> 
     <td> 
      <button class="btn-edit">Edit</button> 
      <button class="btn-save" style="display:none">Save</button> 
     </td> 
    </tr> 
</table> 

的Javascript

// listen for email edit button click 
$('.btn-edit').on('click', function() { 

    var $this = $(this), 
     $parentRow = $this.closest('tr'); 

    // get email inline to this edit button 
    var email = $this.parent().siblings('td.email').html(); 

    // change button from edit to save 
    $parentRow.find('.btn-edit').hide(); 
    $parentRow.find('.btn-save').show(); 

    // change email display to input field 
    $(this) 
     .parent() 
     .siblings('td.email') 
     .html('<input type="text" id="user-email" value="'+email+'" />'); 
}); 

// listen for email save button click 
$('.btn-save').on('click', function() { 

    var $this = $(this), 
     $parentRow = $this.closest('tr'); 

    // get new email inline to this save button 
    var newEmail = $(this).parent().siblings('td.email').find('#user-email').val(); 

    // change input field back to display 
    $(this).parent().siblings('td.email').html(newEmail); 

    // change button from save to edit 
    $parentRow.find('.btn-edit').show(); 
    $parentRow.find('.btn-save').hide(); 

}); 

DEMO

Answer 2

尝试这样说：

$(document).on('click',"button#save-email", function() {...

，而不是

$("button#save-email").on('click', function()

使用第二个将无法工作，因为在运行时，$（“按钮＃save-email“），还不存在。

Answer 3

看看KnockoutJS，它利用很好的Bindings帮助你做到这一点更容易。下面是可编辑的网格与KnockoutJS

KnockoutJS Editable Data example

Answer 4

整洁&作品

<table>  
    <tr> 
    <td>some text</td> 
    <td><input type='button' value='edit' id='btn'/></td> 
    </tr>   
</table> 


$(document).ready(function() { 
$("#btn").click(function() { 
    var $btn=$(this); 

    var opn= $btn.val() 


    switch(opn){ 

     case 'edit': 
      var $td=$(this).parent().parent().find('td:first'); 
      var email=$td.html(); 
      $td.html("").append('<input type="text" value="'+email+'">'); 
      $btn.val("save"); 
      break; 

     case 'save': 
      var $input=$(this).parent().parent().find('td:first input'); 
      var email=$input.val(); 
      $input.parent().html(email); 
      $btn.val("edit"); 
      break;  
    } 
}); 
}); 

http://jsfiddle.net/h55rc/