[英]Cannot update all table rows using jquery
I want to update all table rows in a table i have given id to tbody ie cartupdate but when i click the update button the rows are not updated.我想更新表中的所有表行,我已将 id 指定给 tbody,即 cartupdate,但是当我单击更新按钮时,行未更新。 Actually all rows are coming from ajax request but to explain my problem i have taken static row in javascript variable.实际上所有行都来自ajax请求,但为了解释我的问题,我在javascript变量中采用了静态行。 Please help to sort out my issue.请帮助解决我的问题。
$(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" />
The problem is because the HTML you're injecting in to #cartupdate
contains half of a tbody
and half of a tfoot
.问题是因为您注入到#cartupdate
的 HTML 包含tbody
一半和tfoot
一半。 This is invalid.这是无效的。 You have to inject complete elements only.你只需要注入完整的元素。 As such your table
layout is broken.因此,您的table
布局已损坏。
To fix this amend the HTML you inject to include <tbody>
tag at the start and a </tfoot>
element at the end.要解决此问题,请修改您注入的 HTML,以在开头包含<tbody>
标记并在结尾包含</tfoot>
元素。 Then you need to remove the existing tbody
and tfoot
before you append the new HTML to the table
.然后,在将新 HTML 附加到table
之前,您需要删除现有的tbody
和tfoot
。 Try this:尝试这个:
$(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" />
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.