php - jQuery中的nan查看多行值
问题描述
当我显示单行值((数量 * 产品)= 总计)时,它可以工作。
但是,当我更改数量值时,使用会话在一行中添加更多值会导致它显示类似 NaN 的错误。
我的代码:
<table class="table">
<thead>
<tr>
<th class="pro-remove">Remove</th>
<th class="pro-thumbnail">Image</th>
<th class="pro-title">Product</th>
<th class="pro-price">Price</th>
<th class="pro-quantity">Quantity</th>
<th class="pro-subtotal"> Total</th>
</tr>
</thead>
<tbody>
<?php
$cartid = $_GET['proid'];
$sqlpd = mysql_query("select * from orderdetail LEFT JOIN products ON orderdetail.product_id = products.product_id where sessionid='$session_id'")or die(mysql_error());
//echo "select * from orderdetail LEFT JOIN products ON orderdetail.product_id = products.product_id where sessionid='$session_id'";exit();
while($getpd = mysql_fetch_array($sqlpd)){
$product_id = $getpd['product_id'];
?>
<tr>
<td class="pro-remove"><a href="javascript:void(0);" name="cart_remove" id="cart_remove"><i class="fa fa-trash-o"></i></a></td>
<td class="pro-thumbnail">
<img src="admin/<?php echo $getpd['medium_image'];?>" height="50" width="50">
</td>
<td class="pro-title"><?php echo $getpd['product_id'];?></td>
<td class="pro-price"><span class="price"><i class="fa fa-inr"></i><?php echo number_format($getpd['actual_price'],2);?>
</span></td>
<td class="pro-quantity">
<input type="number" class="cardqty-1" id="quantity" min="1" value="1" name="quantity" style="width:50px;">
<a href="javascript:void();" class="updatecart" data-id="1" data-prd_id="380" data-rowid="c2b5d53083a7597dd75ac36d9fd93581"><i class="fa fa-refresh" aria-hidden="true"></i></a>
</td>
<td class="pro-subtotal"><span class="total"><i class="fa fa-inr"></i><?php echo number_format($getpd['actual_price'],2);?></span></td>
</tr>
<?php }?>
</tbody>
<tfoot>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
<th >Sub Total</th>
<th class="pro-subtotal text-center"><span class="total"><i class="fa fa-inr"></i><?php echo $tot_amt += $getpd['actual_price'];?></span></th>
</tr>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
<th >GST(12%)</th>
<th class="pro-subtotal text-center"><i class="fa fa-inr"></i><?php echo $tot_amt +=$getpd['commission_amount'];?></th>
</tr>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
<th >Grand Total</th>
<th class="pro-subtotal text-center"><i class="fa fa-inr"></i><?php echo number_format($getpd['actual_price'],2);?></th>
</tr>
</tfoot>
我的 Jquery 脚本:
<script type="text/javascript">
$(document).ready(function() {
$('input[name=\'quantity\']').on('change keyup click', function() {
var price = $('.price').text();
var currency = $('.price').text();
var quantity = $('#quantity').val();
$('.total').text((price * quantity).toFixed(2));
});
});
</script>
HTML 代码:
<table class="table">
<thead>
<tr>
<th class="pro-remove">Remove</th>
<th class="pro-thumbnail">Image</th>
<th class="pro-title">Product</th>
<th class="pro-price">Price</th>
<th class="pro-quantity">Quantity</th>
<th class="pro-subtotal"> Total</th>
</tr>
</thead>
<tbody>
<tr>
<td class="pro-remove"><a href="javascript:void(0);" name="cart_remove" id="cart_remove" class="delete"><i class="fa fa-trash-o"></i></a></td>
<td class="pro-thumbnail">
<img src="admin/assets/images/uploads/products/920535865hinite_caps.png" height="50" width="50">
</td>
<td class="pro-title">1</td>
<td class="pro-price"><span class="price"><i class="fa fa-inr"></i>360.00 </span></td>
<td class="pro-quantity">
<input type="number" class="cardqty-1 quantity" id="quantity" min="1" value="1" name="quantity" style="width:50px;">
<a href="javascript:void();" class="updatecart" data-id="1" data-prd_id="380" data-rowid="c2b5d53083a7597dd75ac36d9fd93581"><i class="fa fa-refresh" aria-hidden="true"></i></a>
</td>
<td class="pro-subtotal"><span class="total"><i class="fa fa-inr"></i>360.00</span></td>
</tr>
<tr>
<td class="pro-remove"><a href="javascript:void(0);" name="cart_remove" id="cart_remove" class="delete"><i class="fa fa-trash-o"></i></a></td>
<td class="pro-thumbnail">
<img src="admin/assets/images/uploads/products/920535865hinite_caps.png" height="50" width="50">
</td>
<td class="pro-title">1</td>
<td class="pro-price"><span class="price"><i class="fa fa-inr"></i>360.00 </span></td>
<td class="pro-quantity">
<input type="number" class="cardqty-1 quantity" id="quantity" min="1" value="1" name="quantity" style="width:50px;">
<a href="javascript:void();" class="updatecart" data-id="1" data-prd_id="380" data-rowid="c2b5d53083a7597dd75ac36d9fd93581"><i class="fa fa-refresh" aria-hidden="true"></i></a>
</td>
<td class="pro-subtotal"><span class="total"><i class="fa fa-inr"></i>360.00</span></td>
</tr>
</tbody>
<tfoot>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
<th >Sub Total</th>
<th class="pro-subtotal text-center"><span class="total"><i class="fa fa-inr"></i>0</span></th>
</tr>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
<th >GST(12%)</th>
<th class="pro-subtotal text-center"><i class="fa fa-inr"></i>0</th>
</tr>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
<th >Grand Total</th>
<th class="pro-subtotal text-center"><i class="fa fa-inr"></i>0.00</th>
</tr>
</tfoot>
</table>
解决方案
您可以使用类和相同的方式计算最终总数
$(document).ready(function() {
$(document).on('change keyup click', '.quantity', function(e){
var _t = $(this);
var price = parseFloat(_t.parents('tr').find('.price').text());
var currency = _t.parents('tr').find('.price').text();
var quantity = parseInt(_t.parents('tr').find('.quantity').val());
_t.parents('tr').find('.ttotal').text((price * quantity).toFixed(2));
var subtotal = 0;
$('.ttotal').each(function(){
var _te = $(this);
var oneval = _te.html().replace('<i class="fa fa-inr"></i>','');
subtotal += parseFloat(oneval);
});
$('.last_subtotal').text(subtotal);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table">
<thead>
<tr>
<th class="pro-remove">Remove</th>
<th class="pro-thumbnail">Image</th>
<th class="pro-title">Product</th>
<th class="pro-price">Price</th>
<th class="pro-quantity">Quantity</th>
<th class="pro-subtotal"> Total</th>
</tr>
</thead>
<tbody>
<tr>
<td class="pro-remove"><a href="javascript:void(0);" name="cart_remove" id="cart_remove" class="delete"><i class="fa fa-trash-o"></i></a></td>
<td class="pro-thumbnail">
<img src="admin/assets/images/uploads/products/920535865hinite_caps.png" height="50" width="50">
</td>
<td class="pro-title">1</td>
<td class="pro-price"><span class="price"><i class="fa fa-inr"></i>360.00 </span></td>
<td class="pro-quantity">
<input type="number" class="cardqty-1 quantity" id="quantity" min="1" value="1" name="quantity" style="width:50px;">
<a href="javascript:void();" class="updatecart" data-id="1" data-prd_id="380" data-rowid="c2b5d53083a7597dd75ac36d9fd93581"><i class="fa fa-refresh" aria-hidden="true"></i></a>
</td>
<td class="pro-subtotal"><span class="total ttotal"><i class="fa fa-inr"></i>360.00</span></td>
</tr>
<tr>
<td class="pro-remove"><a href="javascript:void(0);" name="cart_remove" id="cart_remove" class="delete"><i class="fa fa-trash-o"></i></a></td>
<td class="pro-thumbnail">
<img src="admin/assets/images/uploads/products/920535865hinite_caps.png" height="50" width="50">
</td>
<td class="pro-title">1</td>
<td class="pro-price"><span class="price"><i class="fa fa-inr"></i>360.00 </span></td>
<td class="pro-quantity">
<input type="number" class="cardqty-1 quantity" id="quantity" min="1" value="1" name="quantity" style="width:50px;">
<a href="javascript:void();" class="updatecart" data-id="1" data-prd_id="380" data-rowid="c2b5d53083a7597dd75ac36d9fd93581"><i class="fa fa-refresh" aria-hidden="true"></i></a>
</td>
<td class="pro-subtotal"><span class="total ttotal"><i class="fa fa-inr"></i>360.00</span></td>
</tr>
</tbody>
<tfoot>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
<th >Sub Total</th>
<th class="pro-subtotal text-center"><span class="total last_subtotal"><i class="fa fa-inr"></i>0</span></th>
</tr>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
<th >GST(12%)</th>
<th class="pro-subtotal text-center"><i class="fa fa-inr"></i>0</th>
</tr>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
<th >Grand Total</th>
<th class="pro-subtotal text-center"><i class="fa fa-inr"></i>0.00</th>
</tr>
</tfoot>
</table>
旧答案
您应该使用Number进行操作,所以使用parseInt
andparseFloat
$(document).ready(function() {
$('input[name=\'quantity\']').on('change keyup click', function() {
var price = parseFloat($('.price').text());
var currency = $('.price').text();
var quantity = parseInt($('#quantity').val());
$('.total').text((price * quantity).toFixed(2));
});
});
推荐阅读
- inheritance - draw uml class diagram with both super class object and subclass object being called in a third class
- python-3.x - 将 Tkinter 输入框映射到 python 3.8 中的变量
- android - 为什么 Android Studio 无法读取我解压后的 docx xml 文件的全部内容?
- sql - 根据组合框值在文本框中显示多个值
- android - 使用 Kotlin Flow 测试 Android Room
- linux-kernel - 在 VXLAN 覆盖网络中,sendto() 何时完成/返回?
- math - 如何找到最近的具有相同线长的新点?
- c# - CTCI 字符串压缩算法替代方法
- kubernetes - 即使我有凭据,gcloud get-credentials 也需要编辑权限
- python - 遍历dict并检查之前或之后的值