Cannot update all table rows using jquery

Question

I want to update all table rows in a table i have given id to tbody i.e. cartupdate but when i click the update button the rows are not updated. Actually all rows are coming from ajax request but to explain my problem i have taken static row in javascript variable. 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" />

Rory McCrossan · Accepted Answer · 2019-03-06 08:17:51Z

The problem is because the HTML you're injecting in to #cartupdate contains half of a tbody and half of a tfoot. This is invalid. You have to inject complete elements only. As such your tablelayout is broken.

To fix this amend the HTML you inject to include <tbody> tag at the start and a </tfoot> element at the end. Then you need to remove the existing tbody and tfoot before you append the new HTML to the table. 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" />

Collectives™ on Stack Overflow

Cannot update all table rows using jquery

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related