I was wondering If the payment status is Y, can the price be subtracted accordingly. The amount yet to be paid will show the subtraction result
For example, in this case, since both 50 and 10 is paid,
the amount yet to be paid will be the "total (ie 70) minus (50+10)" = 10
Many thanks.
$(document).ready(function(){
$("#myTable").on('input', '.txtCal', function () {
calculate();
});
function calculate() {
var calculated_total_sum = 0;
$("#myTable .txtCal").each(function () {
var get_textbox_value = $(this).val();
if ($.isNumeric(get_textbox_value)) {
calculated_total_sum += parseFloat(get_textbox_value);
}
});
$("#total_sum_value").html(calculated_total_sum);
}
calculate();
});
<html>
<head><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
<table id="myTable">
<tr> <th width="100">Name </th>
<th>Price</th><th>Payment status</th>
</tr>
<tr>
<td><span>A</span></td>
<td><input type="text" class='txtCal' value="50" /></td>
<td><input type="text" class='status' value="Y" /></td>
</tr>
<tr>
<td><span>B :</span></td>
<td><input type="text" class='txtCal' value="10" /></td>
<td><input type="text" class='status' value="Y" /></td>
</tr>
<tr>
<td><span>C:</span></td>
<td><input type="text" class='txtCal' value="10" /></td>
<td><input type="text" class='status' value="N" /></td>
</tr>
<tr>
<td><span><b>TOTAL :</b></span></td>
<td><b><span id="total_sum_value"></span></b></td>
</tr>
<tr>
<td><span><b>Yet to be paid</b></span></td>
<td><b><span id="arrears"></span></b></td>
</tr>
</table>
Yes, you can check the payment status column for N and sum those values. Like this:
$(document).ready(function() {
$("#myTable").on('input', '.txtCal, .status', function() {
calculate();
});
function calculate() {
var calculated_total_sum = 0;
var to_be_paid = 0;
$("#myTable tr").each(function() {
var get_textbox_value = $('.txtCal', this).val();
var get_payment_status = $('.status', this).val();
if (get_textbox_value && get_payment_status) {
if ($.isNumeric(get_textbox_value)) {
calculated_total_sum += parseFloat(get_textbox_value);
}
if (get_payment_status === 'N') {
to_be_paid += parseFloat(get_textbox_value);
}
}
});
$("#total_sum_value").html(calculated_total_sum);
$("#arrears").html(to_be_paid);
}
calculate();
});
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
<table id="myTable">
<tr>
<th width="100">Name </th>
<th>Price</th>
<th>Payment status</th>
</tr>
<tr>
<td><span>A</span></td>
<td><input type="text" class='txtCal' value="50" /></td>
<td><input type="text" class='status' value="Y" /></td>
</tr>
<tr>
<td><span>B :</span></td>
<td><input type="text" class='txtCal' value="10" /></td>
<td><input type="text" class='status' value="Y" /></td>
</tr>
<tr>
<td><span>C:</span></td>
<td><input type="text" class='txtCal' value="10" /></td>
<td><input type="text" class='status' value="N" /></td>
</tr>
<tr>
<td><span><b>TOTAL :</b></span></td>
<td><b><span id="total_sum_value"></span></b></td>
</tr>
<tr>
<td><span><b>Yet to be paid</b></span></td>
<td><b><span id="arrears"></span></b></td>
</tr>
</table>
Another solution would be, getting the parent for every iteration, it might a little less performance friendly but here you go:
$(document).ready(function(){
$("#myTable").on('input', '.txtCal', function () {
calculate();
});
function calculate() {
var calculated_total_sum = 0;
var yet_to_be_paid = 0;
$("#myTable .txtCal").each(function () {
var get_textbox_value = $(this).val();
if ($.isNumeric(get_textbox_value)) {
calculated_total_sum += parseFloat(get_textbox_value);
}
if($(this).parent().parent().find(".status").first().val() == "Y") {
yet_to_be_paid += parseFloat($(this).val());
}
});
$("#total_sum_value").html(calculated_total_sum);
$("#arrears").html(calculated_total_sum - yet_to_be_paid);
}
calculate();
});
<html>
<head><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
<table id="myTable">
<tr> <th width="100">Name </th>
<th>Price</th><th>Payment status</th>
</tr>
<tr>
<td><span>A</span></td>
<td><input type="text" class='txtCal' value="50" /></td>
<td><input type="text" class='status' value="Y" /></td>
</tr>
<tr>
<td><span>B :</span></td>
<td><input type="text" class='txtCal' value="10" /></td>
<td><input type="text" class='status' value="Y" /></td>
</tr>
<tr>
<td><span>C:</span></td>
<td><input type="text" class='txtCal' value="10" /></td>
<td><input type="text" class='status' value="N" /></td>
</tr>
<tr>
<td><span><b>TOTAL :</b></span></td>
<td><b><span id="total_sum_value"></span></b></td>
</tr>
<tr>
<td><span><b>Yet to be paid</b></span></td>
<td><b><span id="arrears"></span></b></td>
</tr>
</table>
Related
I want to multiply the textbox values and after multiplication sum of all answer values. Example:
SUM (NSP * Current Sales)
This program is working fine but when I change any value it adds the change not replace the values. It should replace the value of array.
And if possible, please minimize the code logic also. Thanks.
$(document).ready(function() {
var val1;
var val2;
var multi;
one();
second();
});
function one() {
$(document).on("change", ".qty1", function() {
var sumqty1 = 0;
sumqty1 += $(this).val();
val1 = sumqty1;
});
}
function second() {
$(document).on("change", ".qty2", function() {
var sumqty1 = 0;
var sumqty2 = 0;
sumqty1 += $(this).closest('tr').find('.qty1').val();
sumqty2 += $(this).val();
val1 = sumqty1;
val2 = sumqty2;
mul(val1, val2);
});
}
var arr = [];
function mul(a, b) {
var hh;
multi = a * b;
arr.push(multi);
var totalsum = 0;
for (var i in arr) {
var value = arr[i];
totalsum = parseInt(totalsum, 10) + parseInt(value, 10);
$("#totalvalue").text(totalsum);
}
console.log(arr);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table style="width: 100%;" width="100%" cellspacing="0">
<thead>
<tr>
<th>Product Name</th>
<th>NSP</th>
<th>Current Sales</th>
<th>Closing Balance</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Product Name</th>
<th>NSP</th>
<th>Current Sales</th>
<th><span id='totalvalue'></span></th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Satou</td>
<td><input type="text" class="qty1" value="1" disabled /></td>
<td><input type="text" class="qty2" value="" /></td>
<td>23</td>
</tr>
<tr>
<td>panadol</td>
<td><input type="text" class="qty1" value="2" disabled /></td>
<td><input type="text" class="qty2" value="" /></td>
<td>131</td>
</tr>
<tr>
<td>disprine</td>
<td><input type="text" class="qty1" value="3" disabled/></td>
<td><input type="text" class="qty2" value="" /></td>
<td>37</td>
</tr>
<tr>
<td>panadol</td>
<td><input type="text" class="qty1" value="4" disabled /></td>
<td><input type="text" class="qty2" value="" /></td>
<td>173</td>
</tr>
</tbody>
</table>
You are continually adding new values into arr and there's a whole lot of shared mutable state going on here.
If there aren't that many rows in the table, you're best off just recalculating the whole total each time a value changes. Less risk of the data stepping on itself that way:
$(document).ready(function() {
$(document).on('change', '.qty1, .qty2', recalculate);
function getTotal() {
return $('#myTable tr')
.toArray()
.map($)
.map(function (row) {
return row.find('.qty1').val() * row.find('.qty2').val();
})
.filter(function (val) { return !Number.isNaN(val); })
.reduce(function (a, b) { return a + b; }, 0);
}
function recalculate() {
$("#totalvalue").text(getTotal());
}
});
<html>
<head>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
</head>
<body>
<table id="myTable" style="width: 100%;" width="100%" cellspacing="0">
<thead>
<tr>
<th>Product Name</th>
<th>NSP</th>
<th>Current Sales</th>
<th>Closing Balance</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Product Name</th>
<th>NSP</th>
<th>Current Sales</th>
<th><span id='totalvalue'></span></th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Satou</td>
<td><input type="text" class="qty1" value="1" disabled /></td>
<td><input type="text" class="qty2" value="" /></td>
<td>23</td>
</tr>
<tr>
<td>panadol</td>
<td><input type="text" class="qty1" value="2" disabled /></td>
<td><input type="text" class="qty2" value="" /></td>
<td>131</td>
</tr>
<tr>
<td>disprine</td>
<td><input type="text" class="qty1" value="3" disabled/></td>
<td><input type="text" class="qty2" value="" /></td>
<td>37</td>
</tr>
<tr>
<td>panadol</td>
<td><input type="text" class="qty1" value="4" disabled /></td>
<td><input type="text" class="qty2" value="" /></td>
<td>173</td>
</tr>
</tbody>
</table>
</body>
</html>
Id say something like:
$(".qty1, .qty2").on("change", function(){
var qty2 = $(".qty2"),
total = 0;
$(".qty1").each(function(ind){
total += $(qty2[ind]).val() * $(this).val();
})
$("#totalvalue").text(total)
})
Added at the end of the document.
Edited a little
The way you have it right now, you're adding new elements to the array in the order they're created, which doesn't allow you to access them later to change them because they could be stored in any order.
The code below saves each value in the array based on the value of val1 so that each element has a designated place in the array. Because of that, you can update any of the values when they are changed, like so:
var arr = [];
function one() {
$(document).on("change", ".qty1", function() {
var sumqty1 = $(this).val();
});
}
function second() {
$(document).on("change", ".qty2", function() {
var val1 = $(this).closest('tr').find('.qty1').val();;
var val2 = $(this).val();
mul(val1, val2);
});
}
function mul(a, b) {
arr[a - 1] = a * b;
var totalsum = 0;
for (var i in arr) {
var value = arr[i];
totalsum = parseInt(totalsum, 10) + parseInt(value, 10);
$("#totalvalue").text(totalsum);
}
console.log(arr);
}
$(document).ready(function() {
one();
second();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table style="width: 100%;" width="100%" cellspacing="0">
<thead>
<tr>
<th>Product Name</th>
<th>NSP</th>
<th>Current Sales</th>
<th>Closing Balance</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Product Name</th>
<th>NSP</th>
<th>Current Sales</th>
<th><span id='totalvalue'></span></th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Satou</td>
<td><input type="text" class="qty1" value="1" disabled /></td>
<td><input type="text" class="qty2" value="" /></td>
<td>23</td>
</tr>
<tr>
<td>panadol</td>
<td><input type="text" class="qty1" value="2" disabled /></td>
<td><input type="text" class="qty2" value="" /></td>
<td>131</td>
</tr>
<tr>
<td>disprine</td>
<td><input type="text" class="qty1" value="3" disabled/></td>
<td><input type="text" class="qty2" value="" /></td>
<td>37</td>
</tr>
<tr>
<td>panadol</td>
<td><input type="text" class="qty1" value="4" disabled /></td>
<td><input type="text" class="qty2" value="" /></td>
<td>173</td>
</tr>
</tbody>
</table>
I also took out some unnecessary code, including:
The hh declaration (since that variable isn't used) in your second() function
a couple of extraneous lines in your one() function
the multi variable
the sumqty1 and sumqty2 variables (you can just use val1 and val2)
Your val1 and val2 variables didn't need to be global, since you are only using them in one function and passing them as parameters to another.
You could also remove the one() function if you want, since those values seem to be static -- but I'm not sure if you allow that value to be changed in your original code.
hi.this is my code.
How can I make limit for checked numbers or units sum?
for ex:if sum is ≤12 and ≥20 show error log(result) when press submit button.
<script type="text/javascript">
function chkcontrol(j)
{
var sum=0;
for(var i=0; i < document.form1.ckb.length; i++){
if(document.form1.ckb[i].checked){
sum = sum + parseInt(document.form1.ckb[i].value);
}
document.getElementById("msg").innerHTML="Sum :"+ sum;
if(sum >20){
sum = sum - parseInt(document.form1.ckb[j].value);
document.form1.ckb[j].checked = false ;
alert("error:Total of yore choose is more than 20 units")
//return false;
}
document.getElementById("msg").innerHTML="total units :"+ sum;
}
}
</script>
This should solve your problem.
var form = document.forms.myform,
elem = form.elements,
inputVals = document.getElementsByClassName("inputVals");
form.onsubmit = function(event){
event.preventDefault();
var totalSum = 0;
for(var i = 1; i <= inputVals.length; i++) {
var input = document.getElementById("value" + i)
if (input.checked) {
totalSum += parseInt(input.value);
}
}
if (totalSum < 12 || totalSum > 20) {
alert("error:Total of your choise is more than 20 or less 12 units")
}
else {
document.getElementById("msg").innerHTML="total units :" + totalSum;
}
}
.center{text-align:center;margin-top:1em;}
<form name="myform" actopm="/echo/html/" method="post">
<table>
<tr>
<th>1</th>
<td><input class="inputVals" value=1 type="checkbox" id="value1" placeholder="input value"/></td>
</tr>
<tr>
<th>2</th>
<td><input class="inputVals" value=2 type="checkbox" id="value2" placeholder="input value"/></td>
</tr>
<tr>
<th>3</th>
<td><input class="inputVals" value=3 type="checkbox" id="value3" placeholder="input value"/></td>
</tr>
<tr>
<th>4</th>
<td><input class="inputVals" value=4 type="checkbox" id="value4" placeholder="input value"/></td>
</tr>
<tr>
<th>5</th>
<td><input class="inputVals" value=5 type="checkbox" id="value5" placeholder="input value"/></td>
</tr>
<tr>
<th>6</th>
<td><input class="inputVals" value=6 type="checkbox" id="value6" placeholder="input value"/></td>
</tr>
<tr>
<th>7</th>
<td><input class="inputVals" value=7 type="checkbox" id="value7" placeholder="input value"/></td>
</tr>
<tr>
<th>8</th>
<td><input class="inputVals" value=8 type="checkbox" id="value8" placeholder="input value"/></td>
</tr>
</table>
<div class="center">
<input type="submit" value="submit"/>
</div>
</form>
<div id="msg">
</div>
I have a lacking function in my app using laravel that calculates the total average. Since it needs javascript, I had trouble with and now simplied the table with foreach before into this static values but since I have script for average, now I need a the function for total average.
Hope all could assist me with what I've started. Thank you in advance.
$("input").on("keyup", function() {
$("tbody tr").each(function() {
var col = 1;
var tr = 1;
var t = 0;
var a = 0;
$(this).children('td').not(':first').not(':last').each(function() {
var number = ($(this).children('input').length == 0) ? $(this).html() : $(this).children('input').first().val();
t += parseInt(number);
a = t / col;
col++;
});
$(this).children('td').last().html(a);
col = 1;
tr++;
});
//getTotalave();
});
<html>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>Grade</th>
<th>score 1</th>
<th>score 2</th>
<th>score 3</th>
<th>score 4</th>
<th>average</th>
</tr>
</thead>
<tbody>
<tr>
<td>student1</td>
<td><input type="text" id="s1" value="85"></td>
<td><input type="text" id="s2" value="86"></td>
<td><input type="text" id="s3" value="84"></td>
<td><input type="text" id="s4" value="81"></td>
<td class="ave" value="0">84</td>
</tr>
<tr>
<td>student2</td>
<td><input type="text" id="s1" value="88"></td>
<td><input type="text" id="s2" value="80"></td>
<td><input type="text" id="s3" value="84"></td>
<td><input type="text" id="s4" value="85"></td>
<td class="ave" value="0">84.25</td>
</tr>
<tr>
<td>student3</td>
<td><input type="text" id="s1" value="86"></td>
<td><input type="text" id="s2" value="86"></td>
<td><input type="text" id="s3" value="87"></td>
<td><input type="text" id="s4" value="90"></td>
<td class="ave" value="0">87.25</td>
</tr>
<tr>
<td>student4</td>
<td><input type="text" id="s1" value="85"></td>
<td><input type="text" id="s2" value="80"></td>
<td><input type="text" id="s3" value="89"></td>
<td><input type="text" id="s4" value="90"></td>
<td class="ave" value="0">86</td>
</tr>
<tr>
<th>Total Average</th>
<td class="tave" value="">85.375</td>
</tr>
</tbody>
</table>
</body>
</html>
using a unique class name for the total:
$("input").on("keyup", function() {
var tAv = 0,
tRo = 0;
$("tbody tr").not(':last').each(function() {
var col = 0,
t = 0; // starting counters
tRo++;
$(this).children('td').not(':first').not(':last').each(function() {
t += parseFloat($('input', this).val()) || 0;
col++;
});
var rAv = t / col; // row average
tAv += rAv; // increment average
$('td', this).last().text(rAv.toFixed(2)); // row average display
});
$('.tave').text((tAv / tRo).toFixed(2)); // final average
});
<html>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>Grade</th>
<th>score 1</th>
<th>score 2</th>
<th>score 3</th>
<th>score 4</th>
<th>average</th>
</tr>
</thead>
<tbody>
<tr>
<td>student1</td>
<td><input type="text" id="s1" value="85"></td>
<td><input type="text" id="s2" value="86"></td>
<td><input type="text" id="s3" value="84"></td>
<td><input type="text" id="s4" value="81"></td>
<td class="ave" value="0">84</td>
</tr>
<tr>
<td>student2</td>
<td><input type="text" id="s1" value="88"></td>
<td><input type="text" id="s2" value="80"></td>
<td><input type="text" id="s3" value="84"></td>
<td><input type="text" id="s4" value="85"></td>
<td class="ave" value="0">84.25</td>
</tr>
<tr>
<td>student3</td>
<td><input type="text" id="s1" value="86"></td>
<td><input type="text" id="s2" value="86"></td>
<td><input type="text" id="s3" value="87"></td>
<td><input type="text" id="s4" value="90"></td>
<td class="ave" value="0">87.25</td>
</tr>
<tr>
<td>student4</td>
<td><input type="text" id="s1" value="85"></td>
<td><input type="text" id="s2" value="80"></td>
<td><input type="text" id="s3" value="89"></td>
<td><input type="text" id="s4" value="90"></td>
<td class="ave" value="0">86</td>
</tr>
<tr>
<th>Total Average</th>
<td class="tave" value="">85.375</td>
</tr>
</tbody>
</table>
</body>
</html>
I have a small question and I hope someone can help me with it :D
I’m trying to create a product table, in which a user just add the quantity of a product and the jquery makes the multiplication to its value and gives the result
I already made this, and it works well:
<script>
$(document).ready(function(){
$('#quantity_1').keyup(function(){
var price_1 = $("#price_1").val();
var quantity_1 = $("#quantity_1").val();
quantity_1 = quantity_1.replace(/[^0-9]+/g, '');
$("#quantity_1").val(quantity_1);
var total_1 = price_1 * quantity_1;
$( "#total_1" ).val( total_1.toFixed(2) );
});
});
</script>
<table border="1" cellpadding="5px" cellspacing="0" >
<tr>
<td>Product</td>
<td>Price</td>
<td>Quantity</td>
<td>Total</td>
</tr>
<tr>
<td>Product Name</td>
<td><input type="hidden" name="product[1][price]" id="price_1" value="10.00" />10.00</td>
<td><input type="text" name="product[1][quantity]" id="quantity_1" /></td>
<td><input type="text" name="product[1][total]" id="total_1" value="0" /></td>
</tr>
</table>
Working demo here:
http://jsfiddle.net/EnterateNorte/9kswL0gf/
But I would like to be able to add more than one line, like so:
<table border="1" cellpadding="5px" cellspacing="0" >
<tr>
<td>Product</td>
<td>Price</td>
<td>Quantity</td>
<td>Total</td>
</tr>
<tr>
<td>Name 1</td>
<td><input type="hidden" name="product[1][price]" id="price_1" value="10.00" />10.00</td>
<td><input type="text" name="product[1][quantity]" id="quantity_1" /></td>
<td><input type="text" name="product[1][total]" id="total_1" value="0" /></td>
</tr>
<tr>
<td>Name 5</td>
<td><input type="hidden" name="product[5][price]" id="price_5" value="10.00" />23.00</td>
<td><input type="text" name="product[5][quantity]" id="quantity_5" /></td>
<td><input type="text" name="product[5][total]" id="total_5" value="0" /></td>
</tr>
<tr>
<td>Name 3</td>
<td><input type="hidden" name="product[3][price]" id="price_3" value="130.00" />10.00</td>
<td><input type="text" name="product[3][quantity]" id="quantity_3" /></td>
<td><input type="text" name="product[3][total]" id="total_3" value="0" /></td>
</tr>
<tr>
<td>Name 4</td>
<td><input type="hidden" name="product[4][price]" id="price_4" value="12.00" />10.00</td>
<td><input type="text" name="product[4][quantity]" id="quantity_4" /></td>
<td><input type="text" name="product[4][total]" id="total_4" value="0" /></td>
</tr>
</table>
And if it isn’t to much trouble, I would be awesome if it would SUM all the totals and show a gran total at the end of the table :)
Use:
$(document).ready(function(){
$('[name*=quantity]').keyup(function(){
var price = $(this).parent().prev().find('input').val();
var quantity = $(this).val();
var total = price * quantity;
$(this).parent().next().find('input').val( total.toFixed(2) );
});});
Working Demo
Update: For showing Grand Total
var sum = 0;
//iterate through each textboxes and add the values
$('[name*=total]').each(function() {
//add only if the value is number
if(!isNaN(this.value) && this.value.length!=0) {
sum += parseInt(this.value);
}
});
Working Demo
What you can do is to find the elements using their relative position instead of hard coded ids
$(document).ready(function () {
$('input[id^="quantity_"]').keyup(function () {
var $tr = $(this).closest('tr');
var price = $tr.find('input[id^="price_"]').val();
var quantity = this.value;
var total = (price * quantity) || 0;
$tr.find('input[id^="total_"]').val(total.toFixed(2));
});
});
Demo: Fiddle
I've updated your code in Fiddle. You need to change in your markup a bit.
<tr>
<td>Product Name</td>
<td><input type="hidden" class="price" ... />10</td>
<td><input type="text" class="quantity" ... /></td>
<td><input type="text" class="total" ... /></td>
</tr>
$(document).ready(function(){
$('.quantity').keyup(function(){
var parent = $(this).closest("tr");
var price = $(".price", parent).val();
var quantity = $(".quantity", parent).val();
var total = price * quantity;
$(".total", parent).val(total.toFixed(2));
});
});
I would recommend you to use common class
HTML:
<tr>
<td>Name 5</td>
<td>
<input type="hidden" class="price" value="10.00" />10.00</td>
<td>
<input type="text" class="quantity" />
</td>
<td>
<input type="text" class="total" value="0" />
</td>
</tr>
<tr>
<td>Name 3</td>
<td>
<input type="hidden" class="price" value="130.00" />130.00</td>
<td>
<input type="text" class="quantity" />
</td>
<td>
<input type="text" class="total" value="0" />
</td>
</tr>
Script:
$('.quantity').keyup(function () {
var tr = $(this).closest('tr');
var price = tr.find('.price').val();
var quantity = $(this).val();
var total = price * quantity;
tr.find('.total').val(total.toFixed(2));
});
DEMO
Modify your table:
<table border="1" cellpadding="5px" cellspacing="0" id='table' >
<!-- your rows with inputs -->
<tr>
<td>
<input id='totalSum' value='0' type='text' />
</td>
</tr>
</table>
Make all your 'total' inputs readonly by adding 'readonly' attribute.
js code:
$(document).ready(function(){
$('[name*=quantity]').keyup(function(){
var total = 0;
$('#table tr').each(function(i,item){
var price = parseFloat($(item).find('[name*=price]').val().replace(',','.'));
var quantity = parseInt($(item).find('[name*=quantity]').val());
if(!isNaN(price) && !isNan(quantity)){
total += price*quantity;
}
});
$("#totalSum").val(total.toFixed(2));
});
});
I have searched a lot and couldn't find a solution, and since my code abilities are somewhat limited, I ask for help.
What I am trying to do is exactly what is found here: http://jsfiddle.net/unKDk/335/
$(function(){
var $iTableTotals = $("#iTable .colTotal");
var $eTableTotals = $("#eTable .colTotal");
var $diffValues = $(".diffValue");
$(".colTotal").on('change keyup', function() {
$iTableTotals.each(function(i){
var diff = Number($iTableTotals.eq(i).val()) - Number($eTableTotals.eq(i).val());
$diffValues.eq(i).val(diff);
});
});
$iTableTotals.eq(0).change();
});
But I would like to have input fields instead of pre-loaded numbers.
To clarify, I found this code on the web, I am no the author of this code.
Thank you.
Not exactly 100% sure what you meant by having input fields instead of pre-loaded numbers. Please see forked Fiddle, hope that's what you meant:
http://jsfiddle.net/B9EWd/
HTML:
<table id="sum_table" width="300" border="1">
<tr class="titlerow">
<td></td>
<td>Apple</td>
<td>Orange</td>
<td>Watermelon</td>
<td>Strawberry</td>
<td>Total By Row</td>
</tr>
<tr>
<td> Row1</td>
<td class="rowAA"><input value="7" /></td>
<td class="rowAA"><input value="2" /></td>
<td class="rowBB"><input value="3" /></td>
<td class="rowBB"><input value="4" /></td>
<td class="totalRow"></td>
</tr>
<tr>
<td> Row2</td>
<td class="rowAA"><input value="1" /></td>
<td class="rowAA"><input value="2" /></td>
<td class="rowBB"><input value="3" /></td>
<td class="rowBB"><input value="4" /></td>
<td class="totalRow"></td>
</tr>
<tr>
<td>Row3</td>
<td class="rowAA"><input value="1" /></td>
<td class="rowAA"><input value="5" /></td>
<td class="rowBB"><input value="3" /></td>
<td class="rowBB"><input value="4" /></td>
<td class="totalRow"></td>
</tr>
<tr class="totalColumn">
<td class="totalCol"></td>
<td class="totalCol"></td>
<td class="totalCol"></td>
<td class="totalCol"></td>
<td class="totalCol"></td>
<td class="totalCol"></td>
</tr>
</table>
Javascript:
function updateTotals() {
$("#sum_table tr:not(:first,:last) td:last-child").text(function(){
var t = 0;
$(this).prevAll().find("input").each(function(){
t += parseInt( $(this).val(), 10 ) || 0;
});
return t;
});
$("#sum_table tr:last td:not(:first,:last)").text(function(i){
var t = 0;
$(this).parent().prevAll().find("td:nth-child("+(i + 2)+") input").each(function(){
t += parseInt( $(this).val(), 10 ) || 0;
});
return "Total: " + t;
});
}
$( "input" ).change( updateTotals );
updateTotals();
Please try with the below code snippet.
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(document).ready(function () {
getTotal();
$(".txtNumber").change(function () {
getTotal();
});
});
function getTotal() {
$("#sum_table tr:not(:first,:last) td:last-child").text(function () {
var t = 0;
$(this).prevAll().each(function () {
t += parseInt($(this).find('input').val(), 10) || 0;
});
return t;
});
$("#sum_table tr:last td:not(:first,:last)").text(function (i) {
var t = 0;
$(this).parent().prevAll().find("td:nth-child(" + (i + 2) + ")").each(function () {
t += parseInt($(this).find('input').val(), 10) || 0;
});
return "Total: " + t;
});
}
</script>
</head>
<body>
<table id="sum_table" width="300" border="1">
<tr class="titlerow">
<td></td>
<td>Apple</td>
<td>Orange</td>
<td>Watermelon</td>
<td>Strawberry</td>
<td>Total By Row</td>
</tr>
<tr>
<td>Row1</td>
<td class="rowAA">
<input type="text" value="1" class="txtNumber" /></td>
<td class="rowAA">
<input type="text" value="2" class="txtNumber" /></td>
<td class="rowBB">
<input type="text" value="3" class="txtNumber" /></td>
<td class="rowBB">
<input type="text" value="4" class="txtNumber" /></td>
<td class="totalRow"></td>
</tr>
<tr>
<td>Row2</td>
<td class="rowAA">
<input type="text" value="1" class="txtNumber" /></td>
<td class="rowAA">
<input type="text" value="2" class="txtNumber" /></td>
<td class="rowBB">
<input type="text" value="3" class="txtNumber" /></td>
<td class="rowBB">
<input type="text" value="4" class="txtNumber" /></td>
<td class="totalRow"></td>
</tr>
<tr>
<td>Row3</td>
<td class="rowAA">
<input type="text" value="1" class="txtNumber" /></td>
<td class="rowAA">
<input type="text" value="5" class="txtNumber" /></td>
<td class="rowBB">
<input type="text" value="3" class="txtNumber" /></td>
<td class="rowBB">
<input type="text" value="4" class="txtNumber" /></td>
<td class="totalRow"></td>
</tr>
<tr class="totalColumn">
<td class="totalCol"></td>
<td class="totalCol"></td>
<td class="totalCol"></td>
<td class="totalCol"></td>
<td class="totalCol"></td>
<td class="totalCol"></td>
</tr>
</table>
</body>
</html>