我需要用最少的脚本或Jquery代码对html页面中的值进行求和

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

本文关键字：html 求和 Jquery 脚本 代码      更新时间：2023-09-26

我的html代码：

<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>

这里我有一个para标签，显示产品的价格。我将动态填充它，在实际场景中会有很多行。我需要的是para标签中的值：

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

需要进行总结。

您可以像这样简单地使用jQuery。

$(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);
});

    $(".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
    });

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]);
}
相关文章：