jQuery中的Nan以查看多个行值
问题描述 投票：0回答：1
当我显示单行值（（数量*产品）=总计）时，工作正常。在屏幕截图中显示。
但是在使用会话连续添加更多值时，当我更改数量值时会显示类似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>
1个回答
0
投票
投票
您可以使用类并以相同的方式计算最终总数
$(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和parseFloat
$(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));
});
});
最新问题
- 为什么从 pandas.date 中减去 pandas.timedelta 没有矢量化？
- 当某人被识别时尝试发出某种警报
- 如何允许单个 ARN 放弃我的拒绝 SCP 政策？
- CSP 设置会通过 ERR_HTTP2_PROTOCOL_ERROR 杀死 Chrome 中的网站
- 在可观察对象内创建的垫表内形成数组
- 最佳回报方式
- 在 Flutter/Android 构建上找不到 protoc-3.9.2-osx
- 使用 SQL、Numpy 或 Python 列表比较列、数组、列表
- 类型错误：“不支持的操作数类型：字符串*浮点数”
- Uniswap Widget 现在可与 next.js 14 配合使用
- GIT 在 git add 之前运行脚本
- 在 Laravel 11 迁移中使用浮动列
- 在 Pandas 中分解多个不均匀的行
- 使用 R 从文本文件创建 SQL 数据库
- php 中不支持的操作数类型
- 如何直接在 Java 中创建/初始化 List<List<String>> 时添加数据值？
- 从外部联接中删除内部联接结果
- 将 Azure 虚拟机添加到现有可用性集
- React-Redux在使用useSelector时找不到react-redux上下文值
- 如何在 ASP.NET MVC 上调用操作而不进行回发？
© www.soinside.com 2019 - 2024. All rights reserved.