Reputation: 187
I'm having issues multiply two columns of a table, outputing the result in to the 3rd column, then adding the totals into the subtotal.
I've got it where it can ADD the input fields but not MULTIPLY. Below is a jsFiddle where I attempt to multiply but it doesn't work
I assume that the issue has to do with multiplying by zero, but I'm not sure exactly where I am going wrong
My code:
$('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>
Upvotes: 0
Views: 38
Reputation: 781726
If you're multiplying a series of numbers, you need to initialize the product with 1
, not 0
. Multiplying by zero produces zero, multiplying by one produces the same value.
You should also use toFixed()
to discard extra fractional digits that often occur when dealing with floating point numbers.
You also had a typo: maxlenght
should be 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>
Upvotes: 1