无法使用jquery更新所有表行

$(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); });

问题是因为您要注入的HTML #cartupdate 包含一半 tbody 一半的 tfoot . 这是无效的。你只需要注入完整的元素。这样你的 table 布局被破坏。

要修复此问题,请修改插入到其中的HTML <tbody> 在开始处标记 </tfoot> 元素在末尾。然后您需要删除现有的 表格主体 和 设计表尾样式 在将新HTML附加到 桌子 .试试这个:

$(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" />