无法使用jquery更新所有表行

Question

我想更新表中的所有表行我已经给了tbody，即cartupdate，但是当我点击更新按钮时，行不会更新。实际上所有行都来自ajax请求，但为了解释我的问题，我在javascript变量中采用了静态行。请帮助解决我的问题。

$(document).on('click', '.update_btn', function(e) {
  var test = "<tr><td class='action'><a href='#' id='c9f' class='remove_car'><i class='fa fa-times' aria-hidden='true'></i></a></td><td class='cart_product_desc'> <h5>Product 2</h5> </td><td><span> S </span></td><td class='price'><span>$334</span></td><td class='qty'> <div class='quantity> <input type='number' class='qty-text' id='qty' step='1' min='1' max='1' name='quantity' value=3 disabled> </div> </td> <td class='total_price'><span>1,002</span></td> </tr></tbody><tfoot> <tr> <td><strong>Total</strong></td> <td><strong>Rs 1500</strong></td></tr>";

  $("#cartupdate").empty();
  $("#cartupdate").html(test);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<table class="table table-responsive">
  <thead>
    <tr>
      <th><i class="fa fa-trash-o" aria-hidden="true"></i></th>
      <th>Product</th>
      <th>Size</th>
      <th>Price</th>
      <th>Quantity</th>
      <th>Total</th>
    </tr>
  </thead>
  <tbody id="cartupdate">
    <tr>
      <td class="action"><a href="#" id="c9f" class="remove_cart"><i class="fa fa-times" aria-hidden="true"></i></a></td>
      <td class="cart_product_desc">
        <h5>Product 1</h5>
      </td>
      <td>
        <span> S  </span>
      </td>
      <td class="price"><span>$334</span></td>
      <td class="qty">
        <div class="quantity">
          <input type="number" class="qty-text" id="qty" step="1" min="1" max="1" name="quantity" value=3 disabled>
        </div>
      </td>
      <td class="total_price"><span>1,002</span></td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td><strong>Total</strong></td>
      <td><strong>Rs 1,002</strong></td>
    </tr>
</table>

<input type="button" value="Update" class="update_btn" />

Answer 1

问题是因为你注入#cartupdate的HTML包含一半的tbody和一半的tfoot。这是无效的。您只需要注入完整的元素。因此你的tablelayout被打破了。

要解决此问题，请修改您注入的HTML，以在开头包含<tbody>标记，在结尾处包含</tfoot>元素。然后，在将新HTML附加到tbody之前，需要删除现有的tfoot和table。试试这个：

$(document).on('click', '.update_btn', function(e) {
  var html = '<tbody><tr><td class="action"><a href="#" id="c9f" class="remove_car"><i class="fa fa-times" aria-hidden="true"></i></a></td><td class="cart_product_desc"><h5>Product 2</h5></td><td><span>S </span></td><td class="price"><span>$334</span></td><td class="qty"><div class="quantity"><input type="number" class="qty-text" id="qty" step="1" min="1" max="1" name="quantity" value="3" disabled></div></td><td class="total_price"><span>1,002</span></td></tr></tbody><tfoot><tr><td><strong>Total</strong></td><td><strong>Rs 1500</strong></td></tr>';

  var $table = $('table');
  $table.find('tbody, tfoot').remove();
  $table.append(html);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<table class="table table-responsive">
  <thead>
    <tr>
      <th><i class="fa fa-trash-o" aria-hidden="true"></i></th>
      <th>Product</th>
      <th>Size</th>
      <th>Price</th>
      <th>Quantity</th>
      <th>Total</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="action"><a href="#" id="c9f" class="remove_cart"><i class="fa fa-times" aria-hidden="true"></i></a></td>
      <td class="cart_product_desc">
        <h5>Product 1</h5>
      </td>
      <td>
        <span> S  </span>
      </td>
      <td class="price"><span>$334</span></td>
      <td class="qty">
        <div class="quantity">
          <input type="number" class="qty-text" id="qty" step="1" min="1" max="1" name="quantity" value=3 disabled>
        </div>
      </td>
      <td class="total_price"><span>1,002</span></td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td><strong>Total</strong></td>
      <td><strong>Rs 1,002</strong></td>
    </tr>
</table>

<input type="button" value="Update" class="update_btn" />