I need to sum the values in a html page with as minimal scripting or Jquery code

Question

My html code:

<tr>
    <td class="cart_product">
        <a href="">
            <img src="images/cart/two.png" alt="">
        </a>
    </td>
    <td class="cart_description">
        <h4>
            <a href="">Colorblock Scuba</a>
        </h4>
        <p>Web ID: 1089772</p>
    </td>
    <td class="cart_price">
        <p>$59</p>
    </td>
    <td class="cart_quantity">
        <div class="cart_quantity_button">
            <a class="cart_quantity_up" href=""> + </a>
            <input class="cart_quantity_input" type="text" name="quantity" value="1" autocomplete="off" size="2">
            <a class="cart_quantity_down" href=""> - </a>
        </div>
    </td>
    <td class="cart_total">
        <p class="cart_total_price" name="price" id="price" class="price">$59</p>
    </td>
    <td class="cart_delete">
        <a class="cart_quantity_delete" href="">
            <i class="fa fa-times"></i>
        </a>
    </td>
</tr>

Here i have a para tag which shows price of a product. I will populate it dynamically and there would be number of rows in actual scenario. What i need is the values in the para tags:

<td class="cart_total">
    <p class="cart_total_price" name="price" id="price" class="price">$59</p> 
</td>

needs to be summed.

Show us the final example HTML, and what js did you try already? — Ronen Cypis
– Ronen Cypis, Commented Jul 19, 2016 at 9:57
A better idea would be to explore first and then ask here rather than directly asking a question. — Satej S
– Satej S, Commented Jul 19, 2016 at 10:18

Pajar Fathurrahman · Accepted Answer · 2016-07-19 10:16:33Z

1

you can simply use jQuery each like this.

$(document).ready(function() {
  var total = 0;
  $(".cart_price p").each(function(index){  
    var price = $(this).text();
    price = price.replace("$","");
    total += parseFloat(price);
  });
  console.log(total);//total price result
  $("#price").text("$"+total);
});

edited Jul 19, 2016 at 10:16

answered Jul 19, 2016 at 9:59

Pajar Fathurrahman

1,0211 gold badge10 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

iShukrullo · Accepted Answer · 2016-07-19 10:18:04Z

1

    $(".cart_quantity_input").on("change",function () {
        price = 59; // set your price here
        quantity = parseInt(document.getElementsByClassName("cart_quantity_input")[0].value); // the number of products
        totalPrice = document.getElementById("price"); // tag to show total price 
        totalPrice.innerHTML = price*quantity+"$"; // calculating and writing
    });

answered Jul 19, 2016 at 10:18

iShukrullo

687 bronze badges

Comments

Văn Quyết · Accepted Answer · 2016-07-19 10:11:38Z

0

var items = document.querySelectorAll("table tr");
for (var i = 0; i < items.length; i++) {
   (function(item){
       var price = parseFloat(item.querySelectorAll(".cart_price")[0].innerHTML);
       var quantity_ip = item.querySelectorAll(".cart_quantity_input")[0];
       quantity_ip.onchange = function() {

           item.querySelectorAll(".cart_total_price")[0].innerHTML
               = "$" + price * quantity_ip.value;
       }
   })(items[i]);
}

edited Jul 19, 2016 at 10:11

answered Jul 19, 2016 at 10:05

Văn Quyết

2,5481 gold badge16 silver badges30 bronze badges

Collectives™ on Stack Overflow

I need to sum the values in a html page with as minimal scripting or Jquery code

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related