我有一个文本框的 JavaScript 代码,根据客户购买的商品数量和每个商品的总金额动态添加。金额按数量相乘。我不能做的就是把它们全部加起来。我该如何实现它?我使用了 while 循环,但它只返回了最后一项总数。我知道逻辑,只是不知道如何保存每项的总金额,然后将其添加到下一项。希望有人能帮忙。谢谢。
function totalBillItem(rowcount){
var quantity = parseFloat($("#quantity"+rowcount).val());
var payment_interval = parseFloat($("#payment_interval").val());
var billing_price = parseFloat($("#billing_price"+rowcount).val());
var product = (quantity * billing_price).toFixed(2);
$("#total"+rowcount).val(product);
while(rowcount != 0) {
var sub_total = parseFloat($("#total"+rowcount).val());
rowcount--;
}
var grand_total = sub_total;
$("#grand_total").val(grand_total);
}
我的 HTML:
<table class="table table-striped table-hover" id="myTable">
<tr>
<th style="text-align:center;background-color:#89CFF0;">Name</th>
<th style="text-align:center;background-color:#89CFF0;">Product Price</th>
<th style="text-align:center;background-color:#89CFF0;">Quantity</th>
<th style="text-align:center;background-color:#89CFF0;">Billing Price</th>
<th style="text-align:center;background-color:#89CFF0;">Total</th>
</tr>
<?php
$row_count=0;
$offset=0;
foreach( $data as $row ) :
$dta = unserialize($row->userdata);
?>
<tr class="info">
<td style="text-align:center;" id="prod_name<? echo $row_count; ?>"><?php echo $dta['product_name']; ?></td>
<td style="text-align:center;" id="product_amount<? echo $row_count; ?>"><?php echo $dta['product_amount']; ?></td>
<td style="text-align:center;">
<input type="text" name="quantity<? echo $row_count; ?>" id="quantity<? echo $row_count; ?>" class="span2" onkeydown="totalBillItem('<?php echo $row_count; ?>')" onkeyup="totalBillItem('<?php echo $row_count; ?>')" value="0">
</td>
<td style="text-align:center;">
<input type="text" name="billing_price<? echo $row_count; ?>" id="billing_price<? echo $row_count; ?>" class="span2" onkeydown="totalBillItem('<?php echo $row_count; ?>')" onkeyup="totalBillItem('<?php echo $row_count; ?>')" value="0">
</td>
<td style="text-align:center;">
<input type="text" name="total<? echo $row_count; ?>" id="total<? echo $row_count; ?>" class="span2" readonly>
</td>
</tr>
<input type="hidden" name="prod_uuid<? echo $row_count; ?>" value="<? echo $dta['product_uuid']; ?>">
<input type="hidden" name="prod_amount<? echo $row_count; ?>" value="<? echo $dta['product_amount']; ?>">
<?php
$row_count++;
endforeach;
?>
<input type="hidden" name="row_ctr" value="<? echo $row_count; ?>">
</table>
<br />
Total:
<input type="text" name="grand_total" id="grand_total" class="span2" readonly>
我怎样才能做到这一点? http://jsfiddle.net/c4rjk/
最佳答案
很难看出发生了什么,但我确实在这段代码中发现了一个问题:
while(rowcount != 0){
var sub_total = parseFloat($("#total"+rowcount).val());
rowcount--;
}
您只需在每个循环上重置 sub_total,当您退出 while 循环时,它实际上超出了范围(不知道这在 Javascript 中是否重要)。
将其更改为以下内容:
var sub_total = 0;
while(rowcount != 0){
sub_total += parseFloat($("#total"+rowcount).val());
rowcount--;
}
编辑:
这是计算总数的不同方法。
将类名添加到 html 中的“total”行:(目前替换了 span2,但您可以稍后更改)
<input type="text" class = "total" name="total<? echo $row_count; ?>" id="total<? echo $row_count; ?>" readonly>
并将 while 循环替换为:
var total_element = document.getElementsByClassName('total');
var sub_total = 0;
for (var i = 0; i < total_element.length; ++i) {
var item = total_element[i];
if (total_element[i].value) sub_total += parseFloat(total_element[i].value);
}
请注意,IE8 或之前版本不支持 getElementsByClassName :(
关于javascript - 在 Javascript 中动态添加,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18888312/