如何将表值保存到Jquery变量

Question

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

我已成功将列从<tr>更改为<input type="text">，但我无法将更新的列值保存到jQuery变量，因此我可以将更新的数据发送到服务器。

请指导我如何在变量中保存更新的值

 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;
   // var username= 

 });

<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 Object input更新HTML，您需要使用.append()或类似内容。

$(this).closest('tr').find('.edited').each(function () {
  var html = $(this).html();
  var input = $('<input type="text" />');
  input.val(html);
  input.appendTo(this);
});