Question

我正在尝试使用jQuery Ajax更新一行。

当我点击Edit按钮时，它会<tr>更改为<input type='text'>，我添加了.Change方法并且它已成功触发，但我想将其更改回{{ 1}}当<tr>事件被触发时。

请检查并指导我在用户更新行时如何将其更改回change。

由于

<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");

 });

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_dump($user['auth_key']);
    exit();
    return Url::to(['registration/confirm', 'email' => $this->email, 'authkey' => $user['auth_key']], true);

JS Bin here。

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');
});

如何将<input type =“text”/>更改为使用jquery

3 个答案: