2016-07-19 7 views
1

私のhtmlコード:ここで私はのように、最小限のスクリプトやjQueryのコードを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> 

私は、製品の価格を示しパラタグを持っています。私はそれを動的に設定し、実際のシナリオでは行数があります。私が必要とするのは、パラタグの値です。

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

を合計する必要があります。

+3

そして、あなたは試してみましたか? –

+0

私たちに最後の例題のHTMLを見せてください。あなたはすでに何を試しましたか? –

+0

私は問題をどのように達成することができるかを探究しています –

答えて

1

このように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); 
}); 
+0

ありがとうございました.... –

+0

あなたの歓迎... –

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]); 
} 
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 
    }); 
関連する問題