无法使用 jquery 更新所有表行

Question

我想更新表中的所有表行，我已将 id 指定给 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一半。 这是无效的。 你只需要注入完整的元素。 因此，您的table布局已损坏。

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

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