如何改變 <input type=“text”> 至 <tr> 使用jQuery

Question

我正在嘗試使用jQuery Ajax更新行。

當我單擊“ Edit按鈕時，它將<tr>更改為<input type='text'> ，我添加了.Change方法，它成功觸發，但是當change事件觸發時，我想將其更改回<tr> 。

請檢查它，並指導我如何在用戶更新行時將其更改回<tr> 。

謝謝

  var editing = false; $(document).on("click", ".updateUser", function() { if (!editing) { editing = true; $(this).closest('tr').find('.edited').each(function() { var html = $(this).html(); var input = $('<input type="text" />'); input.val(html); $(this).html(input); }); } }).change(function() { editing = false; alert("change Event"); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <table class=" table table-hover"> <thead> <tr> <th>#</th> <th>Username</th> <th>Password</th> <th>Role</th> <th>Edit</th> <th>Delete</th> </tr> </thead> <tbody> <tr> <td class="id edited">ID</td> <td class="id edited">Username</td> <td class="id edited">Password</td> <td class="id edited">Role</td> <td> <button type="button" class="updateUser btn btn-primary btn-xs" data-userId="<?php echo $id; ?>"> EDIT BUTTON </button> </td> </tr> <!-- ROW 2 --> <tr> <td class="id edited">ID</td> <td class="id edited">UsernameText</td> <td class="id edited">PasswordText</td> <td class="id edited">RoleText</td> <td> <button type="button" class="updateUser btn btn-primary btn-xs" data-userId="<?php echo $id; ?>"> EDIT BUTTON </button> </td> </tr> </tbody> </table> 

Answer 1

我已經更改了您的jquery，並且可以正常工作。 我已經添加了更改事件.edited input ，並在一點點改變.updateUser點擊事件。

 var editing = false; $(document).on("click", ".updateUser", function() { if (!editing) { editing = true; $(this).closest('tr').find('.edited').each(function() { if (!$(this).find('input').length) { var html = $(this).text(); var input = $('<input type="text" />'); input.val(html); $(this).html(input); } }); } }).on('change', '.edited input', function() { $(this).parent().text(this.value); editing = false; }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <table class=" table table-hover"> <thead> <tr> <th>#</th> <th>Username</th> <th>Password</th> <th>Role</th> <th>Edit</th> <th>Delete</th> </tr> </thead> <tbody> <tr> <td class="id edited">ID</td> <td class="id edited">Username</td> <td class="id edited">Password</td> <td class="id edited">Role</td> <td> <button type="button" class="updateUser btn btn-primary btn-xs" data-userId="<?php echo $id; ?>"> EDIT BUTTON </button> </td> </tr> <!-- ROW 2 --> <tr> <td class="id edited">ID</td> <td class="id edited">UsernameText</td> <td class="id edited">PasswordText</td> <td class="id edited">RoleText</td> <td> <button type="button" class="updateUser btn btn-primary btn-xs" data-userId="<?php echo $id; ?>"> EDIT BUTTON </button> </td> </tr> </tbody> </table> 

Answer 2

您要做的就是與您已經做的相反：

var editing = false;
$(document)
  .on(
     "click", 
     ".updateUser", 
     function(){
        if(!editing){
           editing = true;
           $(this)
              .closest('tr')
              .find('.edited')
              .each(
                 function() {
                    var html = $(this).html(),
                        input = $('<input type="text" />');
                    input.val(html);
                    $(this).html(input);
                 }
              );
        }

}).change(
    function(e){
       if(editing){
          editing = false;
          $(e.target)
             .closest('tr')
             .find('.edited')
             .each(
                function() {
                   var val = $(this).children('input').val();
                   $(this).html(val);
                }
             );
      }
});

JS Bin 在這里 。

Answer 3

這也是在表行中內聯編輯的一種很好的解決方案-JSBIN

$(document).on("click", ".updateUser", function() {
    var editing = false;

    if (!editing) {
        editing = true;
        $(this).closest('tr').find('.edited').each(function() {
            var html = $(this).html();
            var input = $('<input type="text" />');
            input.val(html);
            $(this).html(input);
        });
        $(this).addClass('save');
        $(this).removeClass('updateUser');
    }
});

$(document).on('click', '.save', function(){
    $(this).closest('tr').find('input').each(function(){
        $(this).closest('td').html($(this).val());
        $(this).remove();
    });
    $(this).removeClass('save');
    $(this).addClass('updateUser');
});