我无法得到小计。 jquery 的购物车

Question

晚上好maam/sir。我需要一些帮助，了解如何 select 我的每件产品的所有总价，以便我可以进行小计。我已经对如何获得小计进行了一些研究，但仍然没有运气。我已经尝试使用 for loop 或 .each 循环它，但仍然无法正常工作我已经尝试修复了将近 15 个小时

<div class="col-sm-12 col-md-10 col-md-offset-1">
<table class="table table-hover">
<thead>
<tr>
 <th>Product</th>
  <th>Restaurant</th>
  <th>Quantity</th>
  <th class="text-center">Price</th>
 <th class="text-center">Total</th>
 <th> </th>
</tr>
</thead>
<?php foreach ($cart as $value): ?>


<tbody>
 <tr>
  <td class="col-sm-8 col-md-6">
  <div class="media">
  <a class="thumbnail pull-left" href="#"> <img class="media-object" 
  src="http://icons.iconarchive.com/icons/custom-icon-design/flatastic- 
  2/72/product-icon.png" style="width: 72px; height: 72px;"> </a>
 <div class="media-body">
   <h4 class="media-heading"><a href="#"><?php echo $value['product_name'] 
  ?></a> 
  </h4>
    <h5 class="media-heading"> by <a href="#"><?php echo 
  $value['restaurant_name'] 
  ?></a></h5>
 <span>Status: </span><span class="text-warning"><strong><?php echo 
  $value['status'] ?></strong></span>
  </div>
  </div></td>
  <td class="col-md-1 text-left"><strong class="label label- 
  danger">None</strong></td>
 <td class="col-sm-1 col-md-1" style="text-align: center">
 <input type="email" class="form-control qty" id="qty" name="qty" 
 value="">
  </td>
  <td class="col-sm-1 col-md-1 text-center"><strong class="prodprice" 
  id="prodprice"><?php echo $value['price'] ?></strong></td>
  <td class="col-sm-1 col-md-1 text-center" ><strong id="prodtotal" 
   class="prodtotal"></strong></td>
    <td class="col-sm-1 col-md-1">
    <button type="button" class="btn btn-danger">
  <span class="fa fa-remove"></span> Remove
  </button></td>
 </tr>
 <?php endforeach ?>    
  <tr>
   <td>   </td>
   <td>   </td>
   <td>   </td>
   <td><h5>Subtotal</h5></td>
   <td class="text-right"><h5><strong>9.99</strong></h5></td>
   </tr>
   <tr>
    <td>   </td>
    <td>   </td>
    <td>   </td>
    <td><h5>Estimated shipping</h5></td>
    <td class="text-right"><h5><strong>.999.99</strong></h5></td>
    </tr>
   <tr>
    <td>   </td>
    <td>   </td>
   <td>   </td>
   <td><h3>Total</h3></td>
  <td class="text-right" id="total"><h3><strong>.999.99</strong></h3> 
 </td>
 </tr>
 <tr>
    <td>   </td>
    <td>   </td>
    <td>   </td>
    <td>
    <button type="button" class="btn btn-default">
    <span class="fa fa-shopping-cart"></span> Continue Shopping
    </button></td>
     <td>

    <a href="<?php echo base_url('admin/checkout') ?>"><button type="button" 
    class="btn btn-success" >
     Checkout <span class="fa fa-play"></span></a>
     </button></td>
     </tr>
    </tbody>
     </table>
     </div>

<script>
        $('.qty').on('input', function() {
          var selector = $(this).closest("tr") //get closest tr
          var price = parseInt(selector.find('.prodprice').text()) //get price
          var qty = parseInt($(this).val());
          var prodtotal = price * qty;
          var subtotal;
         console.log(price)
          console.log(qty)

          var a =$("#totalcart").val();
          selector.find('.prodtotal').html(prodtotal); //add total in same row.

            for(var i =0; i <= a; i++) {
             subtotal=price[i] * qty[i];
              console.log(subtotal)
            }

         
         

           
        })




            
        </script>

Answer 1

您可以使用 .each 循环遍历 prodtotal 元素，并在每次迭代时检查 prodtotal 中的值是否不是 ""，具体取决于此用途 parseInt($(this).text()) 或将值视为 0，然后将此总数添加到 subtotal

演示代码 :

$('.qty').on('input', function() {
  var selector = $(this).closest("tr") //get closest tr
  var price = parseInt(selector.find('.prodprice').text()) //get price
  var qty = parseInt($(this).val());
  var prodtotal = price * qty;
  selector.find('.prodtotal').html(prodtotal); //add total in same row
  var result = 0;
  //loop through total column
  $("tr .prodtotal").each(function() {
    //check if the text is not ""
    result += ($(this).text().trim() != "") ? parseInt($(this).text()) : 0
  })
  //add result inside subtotal
  $(".subtotal").text(result)
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-sm-12 col-md-10 col-md-offset-1">
  <table class="table table-hover">
    <thead>
      <tr>
        <th>Product</th>
        <th>Restaurant</th>
        <th>Quantity</th>
        <th class="text-center">Price</th>
        <th class="text-center">Total</th>
        <th> </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="col-sm-8 col-md-6">
          <div class="media">
            <a class="thumbnail pull-left" href="#"> <img class="media-object" src="http://icons.iconarchive.com/icons/custom-icon-design/flatastic- 
  2/72/product-icon.png" style="width: 72px; height: 72px;"> </a>
            <div class="media-body">
              <h4 class="media-heading">
                <a href="#">
              Abc
                </a>
              </h4>
              <h5 class="media-heading"> by
                <a href="#">
                Astar
                </a>
              </h5>
              <span>Status: </span><span class="text-warning"><strong>Good</strong></span>
            </div>
          </div>
        </td>
        <td class="col-md-1 text-left"><strong class="label label- 
  danger">None</strong></td>
        <td class="col-sm-1 col-md-1" style="text-align: center">
          <input type="email" class="form-control qty" name="qty" value="">
        </td>
        <td class="col-sm-1 col-md-1 text-center"><strong class="prodprice">55</strong></td>
        <td class="col-sm-1 col-md-1 text-center"><strong class="prodtotal"></strong></td>
        <td class="col-sm-1 col-md-1">
          <button type="button" class="btn btn-danger">
  <span class="fa fa-remove"></span> Remove
  </button></td>
      </tr>
      <tr>
        <td class="col-sm-8 col-md-6">
          <div class="media">
            <a class="thumbnail pull-left" href="#"> <img class="media-object" src="http://icons.iconarchive.com/icons/custom-icon-design/flatastic- 
  2/72/product-icon.png" style="width: 72px; height: 72px;"> </a>
            <div class="media-body">
              <h4 class="media-heading">
                <a href="#">
                Abc1
                </a>
              </h4>
              <h5 class="media-heading"> by
                <a href="#">
                A star 3
                </a>
              </h5>
              <span>Status: </span><span class="text-warning"><strong>ok</strong></span>
            </div>
          </div>
        </td>
        <td class="col-md-1 text-left"><strong class="label label- 
  danger">None</strong></td>
        <td class="col-sm-1 col-md-1" style="text-align: center">
          <input type="email" class="form-control qty" name="qty" value="">
        </td>
        <td class="col-sm-1 col-md-1 text-center"><strong class="prodprice">77</strong></td>
        <td class="col-sm-1 col-md-1 text-center"><strong class="prodtotal"></strong></td>
        <td class="col-sm-1 col-md-1">
          <button type="button" class="btn btn-danger">
  <span class="fa fa-remove"></span> Remove
  </button></td>
      </tr>
      <tr>
        <td> </td>
        <td> </td>
        <td> </td>
        <td>
          <h5>Subtotal</h5>
        </td>
        <td class="text-right">
          <!--just add this class-->
          <h5><strong class="subtotal">9.99</strong></h5>
        </td>
      </tr>
      <tr>
        <td> </td>
        <td> </td>
        <td> </td>
        <td>
          <h5>Estimated shipping</h5>
        </td>
        <td class="text-right">
          <h5><strong>.999.99</strong></h5>
        </td>
      </tr>
      <tr>
        <td> </td>
        <td> </td>
        <td> </td>
        <td>
          <h3>Total</h3>
        </td>
        <td class="text-right" id="total">
          <h3><strong>.999.99</strong></h3>
        </td>
      </tr>
      <tr>
        <td> </td>
        <td> </td>
        <td> </td>
        <td>
          <button type="button" class="btn btn-default">
    <span class="fa fa-shopping-cart"></span> Continue Shopping
    </button></td>
        <td>

          <a href="<?php echo base_url('admin/checkout') ?>"><button type="button" 
    class="btn btn-success" >
     Checkout <span class="fa fa-play"></span></a>
          </button>
        </td>
      </tr>
    </tbody>
  </table>
</div>

我无法得到小计。 jquery 的购物车

I cant get the subtotal. Shopping cart with jquery

ajax

jquery

codeigniter

calculation