数量变化时如何计算表格中一行的总和

Question

I am trying to update the total of each row with increasing quantity but only one row is updated. How can I update each row? How can I add id in these to make more dynamic? I am using jQuery version 2.2.4. Thanks in advance.

<tr>
  <td class="col-sm-8 col-md-6">
    <div class="media">
      <a class="thumbnail pull-left" href="#"> <img src="img/bg-img/b3.jpg" style="width: 72px; height: 72px;" alt=""> </a>
      <div class="media-body">
        <h5 class="media-heading">
          <?php echo isset($carts['title']) ? $carts['title']: ''; ?>
        </h5>
      </div>
    </div>
  </td>
  <td class="col-sm-1 col-md-1 quantity" style="text-align: center">
    <input type="number" class="form-control" id="fname" oninput="myFunction()" value="1" label="">
  </td>
  <td class="col-sm-1 col-md-1 text-center pr-01 price"><strong><?php echo isset($carts['sale_price']) ? $carts['sale_price']: $carts['regular_price'];  ?></strong></td>
  <input type="hidden" class="form-control" id="artprice" value="<?php echo isset($carts['sale_price']) ? $carts['sale_price']: $carts['regular_price'];  ?>" label="">
  <td class="col-sm-1 col-md-1 text-center pr-01" id="total"><strong>$14.61</strong></td>
  <td class="col-sm-1 col-md-1">
    <div class="product" data-id="<?php echo $key; ?>">
      <button type="button" class="btn btn-danger remove-from-cart">Remove</button>
    </td>
  </div>
</tr>

function myFunction() {
  var x = document.getElementById("fname") value;
  var str = $("#artprice").val();
  $('#total').html(str * x);
}

Answer 1

There's several issues in your code.

• There's a </div> in the wrong place. It's outside the <td> it belongs to
• The #artprice input is outside the table structure. It needs to be placed within a td
• There's a missing . before the value property in the JS.

However the biggest issue is because your repeat the same id attributes on multiple elements as you loop through to create these rows in the HTML. id have to be unique within the DOM.

To fix this use common class attributes on all the elements you need to find instead, then use jQuery's DOM traversal techniques to retrieve them based on the current row.

Also note in the below example that I used an unobtrusive event handler. Inline event attributes are no longer good practice and should be avoided where possible. In addition I removed the inline style attributes and used rules in an external stylesheet. Both of these approaches are preferred due to the Separation of Concerns principle.

With all that said, try this:

 jQuery($ => { $('.fname').on('input', function() { let $row = $(this).closest('tr'); let price = $row.find(".artprice").val(); $row.find('.total strong').text('$' + (this.value * price).toFixed(2)); }); });

 .media a img { width: 72px; height: 72px; } td.quantity { text-align: center; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <table> <tr> <td class="col-sm-8 col-md-6"> <div class="media"> <a class="thumbnail pull-left" href="#"><img src="img/bg-img/b3.jpg" alt=""></a> <div class="media-body"> <h5 class="media-heading">Title</h5> </div> </div> </td> <td class="col-sm-1 col-md-1 quantity"> <input type="number" class="form-control fname" value="1" label=""> </td> <td class="col-sm-1 col-md-1 text-center pr-01 price"> <strong>$14.61</strong> <input type="hidden" class="form-control artprice" value="14.61" label=""> </td> <td class="col-sm-1 col-md-1 text-center pr-01 total"><strong>$14.61</strong></td> <td class="col-sm-1 col-md-1"> <div class="product" data-id="Key"> <button type="button" class="btn btn-danger remove-from-cart">Remove</button> </div> </td> </tr> <tr> <td class="col-sm-8 col-md-6"> <div class="media"> <a class="thumbnail pull-left" href="#"><img src="img/bg-img/b3.jpg" alt=""></a> <div class="media-body"> <h5 class="media-heading">Title</h5> </div> </div> </td> <td class="col-sm-1 col-md-1 quantity"> <input type="number" class="form-control fname" value="1" label=""> </td> <td class="col-sm-1 col-md-1 text-center pr-01 price"> <strong>$57.24</strong> <input type="hidden" class="form-control artprice" value="57.24" label=""> </td> <td class="col-sm-1 col-md-1 text-center pr-01 total"><strong>$57.24</strong></td> <td class="col-sm-1 col-md-1"> <div class="product" data-id="Key"> <button type="button" class="btn btn-danger remove-from-cart">Remove</button> </div> </td> </tr> </table>

One last thing to note is that jQuery 2.2.4 is getting a little old now. You should consider upgrading to 3.x