我在将表格的两列相乘，将结果输出到第三列，然后将总计添加到小计中时遇到问题。
我已经找到了可以添加输入字段但不能相乘的地方。下面是一个 jsFiddle，我尝试在其中进行乘法，但它不起作用
我认为问题与乘以零有关，但我不确定我到底哪里出错了
我的代码:
$('table input').on('input', function() {
var $tr = $(this).closest('tr');
var total = 0;
$('input:not(:last)', $tr).each(function() {
total *= Number($(this).val()) || 0;
console.log(total)
});
$('td:last input', $tr).val(total);
subTotalPrice();
}).trigger('input');
function subTotalPrice() {
var total = 0;
$(".amount").each(function() {
total += parseFloat($(this).val() || 0);
});
$("#subTotalResult").text(total);
}<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<table width="100%" border="0" align="center" cellpadding="3" cellspacing="0" valign="TOP" style="background-color:#fff;">
<tbody align="left">
<tr>
<td colspan="5" class="tablzag2">
From Our Smoker
</td>
</tr>
<tr class="tablzag3">
<td colspan="2" class="tablzag3">
Menu Items
</td>
<td align="center" class="tablzag3">
Servings
</td>
<td align="center" class="tablzag3">
Per Servings
</td>
<td align="center" class="tablzag3">
Ext Cost
</td>
</tr>
<tr valign="middle">
<td width="50%" align="left" class="tablchet">
<div align="left">
<!--need to add in descending container script later-->
<a href="javascript:show_desc_incomplete;" class="tablchet">
<span class="tablcheta">
BBQ Beef Brisket
</span>
</a>
</div>
</td>
<td alight="left" class="tablchet">
<div align="center">
</div>
</td>
<!--quantity input-->
<td width="10%" align="center">
<input type="text" maxlenght="5" class="quantity" style="width:100%; text-align:right" value="0.00">
</td>
<!--unit price-->
<td width="15%" align="right">
<!--need to add in ability to have currency listed in value and then key out currency-->
<input type="text" name="Per Serving" value="3.95" class="unit" readonly="">
</td>
<!--Ext Cost-->
<td align="right" valign="middle" class="tablechet" style="padding-right:10px;">
<input type="text" class="amount" value="0.00" readonly="">
</td>
</tr>
<!--pulled pork row-->
<tr valign="middle">
<td width="50%" align="left" class="tablchet">
<div align="left">
<!--need to add in descending container script later-->
<a href="javascript:show_desc_incomplete;" class="tablchet">
<span class="tablcheta">
Pulled Pork
</span>
</a>
</div>
</td>
<td alight="left" class="tablchet">
<div align="center">
</div>
</td>
<!--quantity input-->
<td width="10%" align="center">
<input type="text" maxlenght="5" class="quantity" style="width:100%; text-align:right" value="0.00">
</td>
<!--unit price-->
<td width="15%" align="right">
<!--need to add in ability to have currency listed in value and then key out currency-->
<input type="text" name="Per Serving" value="3.95" class="unit" readonly="">
</td>
<!--Ext Cost-->
<td align="right" valign="middle" class="tablechet" style="padding-right:10px;">
<input type="text" class="amount" value="0.00" readonly="">
</td>
</tr>
<!--Boneless/Skinless Chicken Breast-->
<tr valign="middle">
<td width="50%" align="left" class="tablchet">
<div align="left">
<!--need to add in descending container script later-->
<a href="javascript:show_desc_incomplete;" class="tablchet">
<span class="tablcheta">
Boneless/Skinless Chicken Breast
</span>
</a>
</div>
</td>
<td alight="left" class="tablchet">
<div align="center">
</div>
</td>
<!--quantity input-->
<td width="10%" align="center">
<input type="text" maxlenght="5" class="quantity" style="width:100%; text-align:right" value="0.00">
</td>
<!--unit price-->
<td width="15%" align="right">
<!--need to add in ability to have currency listed in value and then key out currency-->
<input type="text" name="Per Serving" value="2.99" class="unit" readonly="">
</td>
<!--Ext Cost-->
<td align="right" valign="middle" class="tablechet" style="padding-right:10px;">
<input type="text" class="amount" value="0.00" readonly="">
</td>
</tr>
<!--Smoked Leg Quarter Row-->
<tr valign="middle">
<td width="50%" align="left" class="tablchet">
<div align="left">
<!--need to add in descending container script later-->
<a href="javascript:show_desc_incomplete;" class="tablchet">
<span class="tablcheta">
Smoked Leg Quarter
</span>
</a>
</div>
</td>
<td alight="left" class="tablchet">
<div align="center">
</div>
</td>
<!--quantity input-->
<td width="10%" align="center">
<input type="text" maxlenght="5" class="quantity" style="width:100%; text-align:right" value="0.00">
</td>
<!--unit price-->
<td width="15%" align="right">
<!--need to add in ability to have currency listed in value and then key out currency-->
<input type="text" name="Per Serving" value="2.99" class="unit" readonly="">
</td>
<!--Ext Cost-->
<td align="right" valign="middle" class="tablechet" style="padding-right:10px;">
<input type="text" class="amount" value="0.00" readonly="">
</td>
</tr>
<!--1/2 Cornish Hen-->
<tr valign="middle">
<td width="50%" align="left" class="tablchet">
<div align="left">
<!--need to add in descending container script later-->
<a href="javascript:show_desc_incomplete;" class="tablchet">
<span class="tablcheta">
1/2 Cornish Hen
</span>
</a>
</div>
</td>
<td alight="left" class="tablchet">
<div align="center">
</div>
</td>
<!--quantity input-->
<td width="10%" align="center">
<input type="text" maxlenght="5" class="quantity" style="width:100%; text-align:right" value="0.00">
</td>
<!--unit price-->
<td width="15%" align="right">
<!--need to add in ability to have currency listed in value and then key out currency-->
<input type="text" name="Per Serving" value="2.99" class="unit" readonly="">
</td>
<!--Ext Cost-->
<td align="right" valign="middle" class="tablechet" style="padding-right:10px;">
<input type="text" class="amount" value="0.00" readonly="">
</td>
</tr>
<!--Buffet Ham-->
<tr valign="middle">
<td width="50%" align="left" class="tablchet">
<div align="left">
<!--need to add in descending container script later-->
<a href="javascript:show_desc_incomplete;" class="tablchet">
<span class="tablcheta">
Buffet Ham
</span>
</a>
</div>
</td>
<td alight="left" class="tablchet">
<div align="center">
</div>
</td>
<!--quantity input-->
<td width="10%" align="center">
<input type="text" maxlenght="5" class="quantity" style="width:100%; text-align:right" value="0.00">
</td>
<!--unit price-->
<td width="15%" align="right">
<!--need to add in ability to have currency listed in value and then key out currency-->
<input type="text" name="Per Serving" value="2.99" class="unit" readonly="">
</td>
<!--Ext Cost-->
<td align="right" valign="middle" class="tablechet" style="padding-right:10px;">
<input type="text" class="amount" value="0.00" readonly="">
</td>
</tr>
<!--Mild or Hot Links in BBQ Sauce-->
<tr valign="middle">
<td width="50%" align="left" class="tablchet">
<div align="left">
<!--need to add in descending container script later-->
<a href="javascript:show_desc_incomplete;" class="tablchet">
<span class="tablcheta">
Mild or Hot Links in BBQ Sauce
</span>
</a>
</div>
</td>
<td alight="left" class="tablchet">
<div align="center">
</div>
</td>
<!--quantity input-->
<td width="10%" align="center">
<input type="text" maxlenght="5" class="quantity" style="width:100%; text-align:right" value="0.00">
</td>
<!--unit price-->
<td width="15%" align="right">
<!--need to add in ability to have currency listed in value and then key out currency-->
<input type="text" name="Per Serving" value="2.99" class="unit" readonly="">
</td>
<!--Ext Cost-->
<td align="right" valign="middle" class="tablechet" style="padding-right:10px;">
<input type="text" class="amount" value="0.00" readonly="">
</td>
</tr>
<!--BBQ Pork Spareribs-->
<tr valign="middle">
<td width="50%" align="left" class="tablchet">
<div align="left">
<!--need to add in descending container script later-->
<a href="javascript:show_desc_incomplete;" class="tablchet">
<span class="tablcheta">
BBQ Pork Spareribs
</span>
</a>
</div>
</td>
<td alight="left" class="tablchet">
<div align="center">
</div>
</td>
<!--quantity input-->
<td width="10%" align="center">
<input type="text" maxlenght="5" class="quantity" style="width:100%; text-align:right" value="0.00">
</td>
<!--unit price-->
<td width="15%" align="right">
<!--need to add in ability to have currency listed in value and then key out currency-->
<input type="text" name="Per Serving" value="2.99" class="unit" readonly="">
</td>
<!--Ext Cost-->
<td align="right" valign="middle" class="tablechet" style="padding-right:10px;">
<input type="text" class="amount" value="0.00" readonly="">
</td>
</tr>
<!--Bratwurst Row-->
<tr valign="middle">
<td width="50%" align="left" class="tablchet">
<div align="left">
<!--need to add in descending container script later-->
<a href="javascript:show_desc_incomplete;" class="tablchet">
<span class="tablcheta">
Bratwurst
</span>
</a>
</div>
</td>
<td alight="left" class="tablchet">
<div align="center">
</div>
</td>
<!--quantity input-->
<td width="10%" align="center">
<input type="text" maxlenght="5" class="quantity" style="width:100%; text-align:right" value="0.00">
</td>
<!--unit price-->
<td width="15%" align="right">
<!--need to add in ability to have currency listed in value and then key out currency-->
<input type="text" name="Per Serving" value="2.99" class="unit" readonly="">
</td>
<!--Ext Cost-->
<td align="right" valign="middle" class="tablechet" style="padding-right:10px;">
<input type="text" class="amount" value="0.00" readonly="">
</td>
</tr>
<!--subtotal for "from our smoker" row-->
<tr>
<td colspan="4" align="right" valign="middle" class="subTotalResult">
Subtotal for "From our Smoker" :
</td>
<td align="right" valign="middle" class="subTotalResult" style="padding-right:10px;">
<span id="subTotalResult">
0.00
</span>
</td>
</tr>
</tbody>
</table>
<style>
.tablzag3 {
padding: 5px;
height: 20px;
background-color: #75A3D3;
font-family: Tahoma, Helvetica, Sans-serif;
margin: 0px;
color: #fff;
font-weight: normal;
}
.tablzag2 {
padding: 5px;
height: 20px;
background-color: #4C759F;
font-family: Tahoma, Helvetica, Sans-serif;
margin: 0px;
color: #fff;
font-weight: normal;
}
.tablechet {
padding: 2px 5px 2px 5px;
height: 24px;
color: #627484;
}
.tablcheta {
padding: 2px 5px 2px 5px;
height: 24px;
color: #627484;
font-weight: bold;
text-decoration: underline;
}
.subTotalResult {
height: 24px;
background-color: #E4EEF8;
margin: 0px;
color: #627484;
font-weight: bold;
padding-top: 2px;
padding-right: 5px;
padding-bottom: 2px;
padding-left: 5px;
}
</style>最佳答案
如果您要将一系列数字相乘，则需要使用 1 初始化乘积，而不是 0。乘以零产生零，乘以一产生相同的值。
您还应该使用 toFixed() 丢弃处理 float 时经常出现的额外小数位。
您还有一个拼写错误:maxlenght 应该是 maxlength。
$('table input').on('input', function() {
var $tr = $(this).closest('tr');
var total = 1;
$('input:not(:last)', $tr).each(function() {
total *= Number($(this).val()) || 0;
});
$('td:last input', $tr).val(total.toFixed(2));
subTotalPrice();
}).trigger('input');
function subTotalPrice() {
var total = 0;
$(".amount").each(function() {
total += parseFloat($(this).val() || 0);
});
$("#subTotalResult").text(total.toFixed(2));
}<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<table width="100%" border="0" align="center" cellpadding="3" cellspacing="0" valign="TOP" style="background-color:#fff;">
<tbody align="left">
<tr>
<td colspan="5" class="tablzag2">
From Our Smoker
</td>
</tr>
<tr class="tablzag3">
<td colspan="2" class="tablzag3">
Menu Items
</td>
<td align="center" class="tablzag3">
Servings
</td>
<td align="center" class="tablzag3">
Per Servings
</td>
<td align="center" class="tablzag3">
Ext Cost
</td>
</tr>
<tr valign="middle">
<td width="50%" align="left" class="tablchet">
<div align="left">
<!--need to add in descending container script later-->
<a href="javascript:show_desc_incomplete;" class="tablchet">
<span class="tablcheta">
BBQ Beef Brisket
</span>
</a>
</div>
</td>
<td alight="left" class="tablchet">
<div align="center">
</div>
</td>
<!--quantity input-->
<td width="10%" align="center">
<input type="text" maxlength="5" class="quantity" style="width:100%; text-align:right" value="0.00">
</td>
<!--unit price-->
<td width="15%" align="right">
<!--need to add in ability to have currency listed in value and then key out currency-->
<input type="text" name="Per Serving" value="3.95" class="unit" readonly="">
</td>
<!--Ext Cost-->
<td align="right" valign="middle" class="tablechet" style="padding-right:10px;">
<input type="text" class="amount" value="0.00" readonly="">
</td>
</tr>
<!--pulled pork row-->
<tr valign="middle">
<td width="50%" align="left" class="tablchet">
<div align="left">
<!--need to add in descending container script later-->
<a href="javascript:show_desc_incomplete;" class="tablchet">
<span class="tablcheta">
Pulled Pork
</span>
</a>
</div>
</td>
<td alight="left" class="tablchet">
<div align="center">
</div>
</td>
<!--quantity input-->
<td width="10%" align="center">
<input type="text" maxlenght="5" class="quantity" style="width:100%; text-align:right" value="0.00">
</td>
<!--unit price-->
<td width="15%" align="right">
<!--need to add in ability to have currency listed in value and then key out currency-->
<input type="text" name="Per Serving" value="3.95" class="unit" readonly="">
</td>
<!--Ext Cost-->
<td align="right" valign="middle" class="tablechet" style="padding-right:10px;">
<input type="text" class="amount" value="0.00" readonly="">
</td>
</tr>
<!--Boneless/Skinless Chicken Breast-->
<tr valign="middle">
<td width="50%" align="left" class="tablchet">
<div align="left">
<!--need to add in descending container script later-->
<a href="javascript:show_desc_incomplete;" class="tablchet">
<span class="tablcheta">
Boneless/Skinless Chicken Breast
</span>
</a>
</div>
</td>
<td alight="left" class="tablchet">
<div align="center">
</div>
</td>
<!--quantity input-->
<td width="10%" align="center">
<input type="text" maxlenght="5" class="quantity" style="width:100%; text-align:right" value="0.00">
</td>
<!--unit price-->
<td width="15%" align="right">
<!--need to add in ability to have currency listed in value and then key out currency-->
<input type="text" name="Per Serving" value="2.99" class="unit" readonly="">
</td>
<!--Ext Cost-->
<td align="right" valign="middle" class="tablechet" style="padding-right:10px;">
<input type="text" class="amount" value="0.00" readonly="">
</td>
</tr>
<!--Smoked Leg Quarter Row-->
<tr valign="middle">
<td width="50%" align="left" class="tablchet">
<div align="left">
<!--need to add in descending container script later-->
<a href="javascript:show_desc_incomplete;" class="tablchet">
<span class="tablcheta">
Smoked Leg Quarter
</span>
</a>
</div>
</td>
<td alight="left" class="tablchet">
<div align="center">
</div>
</td>
<!--quantity input-->
<td width="10%" align="center">
<input type="text" maxlenght="5" class="quantity" style="width:100%; text-align:right" value="0.00">
</td>
<!--unit price-->
<td width="15%" align="right">
<!--need to add in ability to have currency listed in value and then key out currency-->
<input type="text" name="Per Serving" value="2.99" class="unit" readonly="">
</td>
<!--Ext Cost-->
<td align="right" valign="middle" class="tablechet" style="padding-right:10px;">
<input type="text" class="amount" value="0.00" readonly="">
</td>
</tr>
<!--1/2 Cornish Hen-->
<tr valign="middle">
<td width="50%" align="left" class="tablchet">
<div align="left">
<!--need to add in descending container script later-->
<a href="javascript:show_desc_incomplete;" class="tablchet">
<span class="tablcheta">
1/2 Cornish Hen
</span>
</a>
</div>
</td>
<td alight="left" class="tablchet">
<div align="center">
</div>
</td>
<!--quantity input-->
<td width="10%" align="center">
<input type="text" maxlenght="5" class="quantity" style="width:100%; text-align:right" value="0.00">
</td>
<!--unit price-->
<td width="15%" align="right">
<!--need to add in ability to have currency listed in value and then key out currency-->
<input type="text" name="Per Serving" value="2.99" class="unit" readonly="">
</td>
<!--Ext Cost-->
<td align="right" valign="middle" class="tablechet" style="padding-right:10px;">
<input type="text" class="amount" value="0.00" readonly="">
</td>
</tr>
<!--Buffet Ham-->
<tr valign="middle">
<td width="50%" align="left" class="tablchet">
<div align="left">
<!--need to add in descending container script later-->
<a href="javascript:show_desc_incomplete;" class="tablchet">
<span class="tablcheta">
Buffet Ham
</span>
</a>
</div>
</td>
<td alight="left" class="tablchet">
<div align="center">
</div>
</td>
<!--quantity input-->
<td width="10%" align="center">
<input type="text" maxlenght="5" class="quantity" style="width:100%; text-align:right" value="0.00">
</td>
<!--unit price-->
<td width="15%" align="right">
<!--need to add in ability to have currency listed in value and then key out currency-->
<input type="text" name="Per Serving" value="2.99" class="unit" readonly="">
</td>
<!--Ext Cost-->
<td align="right" valign="middle" class="tablechet" style="padding-right:10px;">
<input type="text" class="amount" value="0.00" readonly="">
</td>
</tr>
<!--Mild or Hot Links in BBQ Sauce-->
<tr valign="middle">
<td width="50%" align="left" class="tablchet">
<div align="left">
<!--need to add in descending container script later-->
<a href="javascript:show_desc_incomplete;" class="tablchet">
<span class="tablcheta">
Mild or Hot Links in BBQ Sauce
</span>
</a>
</div>
</td>
<td alight="left" class="tablchet">
<div align="center">
</div>
</td>
<!--quantity input-->
<td width="10%" align="center">
<input type="text" maxlenght="5" class="quantity" style="width:100%; text-align:right" value="0.00">
</td>
<!--unit price-->
<td width="15%" align="right">
<!--need to add in ability to have currency listed in value and then key out currency-->
<input type="text" name="Per Serving" value="2.99" class="unit" readonly="">
</td>
<!--Ext Cost-->
<td align="right" valign="middle" class="tablechet" style="padding-right:10px;">
<input type="text" class="amount" value="0.00" readonly="">
</td>
</tr>
<!--BBQ Pork Spareribs-->
<tr valign="middle">
<td width="50%" align="left" class="tablchet">
<div align="left">
<!--need to add in descending container script later-->
<a href="javascript:show_desc_incomplete;" class="tablchet">
<span class="tablcheta">
BBQ Pork Spareribs
</span>
</a>
</div>
</td>
<td alight="left" class="tablchet">
<div align="center">
</div>
</td>
<!--quantity input-->
<td width="10%" align="center">
<input type="text" maxlenght="5" class="quantity" style="width:100%; text-align:right" value="0.00">
</td>
<!--unit price-->
<td width="15%" align="right">
<!--need to add in ability to have currency listed in value and then key out currency-->
<input type="text" name="Per Serving" value="2.99" class="unit" readonly="">
</td>
<!--Ext Cost-->
<td align="right" valign="middle" class="tablechet" style="padding-right:10px;">
<input type="text" class="amount" value="0.00" readonly="">
</td>
</tr>
<!--Bratwurst Row-->
<tr valign="middle">
<td width="50%" align="left" class="tablchet">
<div align="left">
<!--need to add in descending container script later-->
<a href="javascript:show_desc_incomplete;" class="tablchet">
<span class="tablcheta">
Bratwurst
</span>
</a>
</div>
</td>
<td alight="left" class="tablchet">
<div align="center">
</div>
</td>
<!--quantity input-->
<td width="10%" align="center">
<input type="text" maxlenght="5" class="quantity" style="width:100%; text-align:right" value="0.00">
</td>
<!--unit price-->
<td width="15%" align="right">
<!--need to add in ability to have currency listed in value and then key out currency-->
<input type="text" name="Per Serving" value="2.99" class="unit" readonly="">
</td>
<!--Ext Cost-->
<td align="right" valign="middle" class="tablechet" style="padding-right:10px;">
<input type="text" class="amount" value="0.00" readonly="">
</td>
</tr>
<!--subtotal for "from our smoker" row-->
<tr>
<td colspan="4" align="right" valign="middle" class="subTotalResult">
Subtotal for "From our Smoker" :
</td>
<td align="right" valign="middle" class="subTotalResult" style="padding-right:10px;">
<span id="subTotalResult">
0.00
</span>
</td>
</tr>
</tbody>
</table>
<style>
.tablzag3 {
padding: 5px;
height: 20px;
background-color: #75A3D3;
font-family: Tahoma, Helvetica, Sans-serif;
margin: 0px;
color: #fff;
font-weight: normal;
}
.tablzag2 {
padding: 5px;
height: 20px;
background-color: #4C759F;
font-family: Tahoma, Helvetica, Sans-serif;
margin: 0px;
color: #fff;
font-weight: normal;
}
.tablechet {
padding: 2px 5px 2px 5px;
height: 24px;
color: #627484;
}
.tablcheta {
padding: 2px 5px 2px 5px;
height: 24px;
color: #627484;
font-weight: bold;
text-decoration: underline;
}
.subTotalResult {
height: 24px;
background-color: #E4EEF8;
margin: 0px;
color: #627484;
font-weight: bold;
padding-top: 2px;
padding-right: 5px;
padding-bottom: 2px;
padding-left: 5px;
}
</style>关于javascript - 如何将表输入相乘，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56118906/