jQuery abs of values of 2 sets functions when checked - javascript

Working jsfiddle
Still new to jQuery/javacript, but I have 2 functions which sum up hidden values when checked and I need to generate the absolute value of their difference :
$(document).ready(function() {
function sumRows() {
var sum = 0,
total = $('#total');
$('#myteam tr').each(function() {
var amount = $(this).find('input[name="amount"]'),
checkbox = $(this).find('input[name="include"]');
if (checkbox.is(':checked') && amount.val().length > 0) {
sum += parseInt(amount.val(), 10);
}
});
total.text(sum);
}
function sumRows2() {
var sum2 = 0,
total2 = $('#total2');
$('#otherteam tr').each(function() {
var amount2 = $(this).find('input[name="amount2"]'),
checkbox2 = $(this).find('input[name="include2"]');
if (checkbox2.is(':checked') && amount2.val().length > 0) {
sum2 += parseInt(amount2.val(), 10);
}
});
total2.text(sum2);
}
$('input[name="amount"], input[name="include"]').on('change keyup blur', sumRows);
$('input[name="amount2"], input[name="include2"]').on('change keyup blur', sumRows2);
});`
This is the simpler HTML to show you what I'm looking to do, I want the Difference to show up each team a box is checked :
<table>
<tr>
<td colspan="2">Difference:
<span id="diff">0</span>
</td>
</tr>
<tr>
<td>My Team:
<span id="total">0</span>
</td>
<td>Other Team:
<span id="total2">0</span>
</td>
</tr>
<tr>
<td>
<table id="myteam">
<tr>
<td>
<input type="hidden" value="100" name="amount">
</td>
<td>
<input type="checkbox" name="include">
</td>
</tr>
<tr>
<td>
<input type="hidden" value="200" name="amount">
</td>
<td>
<input type="checkbox" name="include">
</td>
</tr>
<tr>
<td>
<input type="hidden" value="300" name="amount">
</td>
<td>
<input type="checkbox" name="include">
</td>
</tr>
</table>
</td>
<td>
<table id="otherteam">
<tr>
<td>
<input type="hidden" value="100" name="amount2">
</td>
<td>
<input type="checkbox" name="include2">
</td>
</tr>
<tr>
<td>
<input type="hidden" value="200" name="amount2">
</td>
<td>
<input type="checkbox" name="include2">
</td>
</tr>
<tr>
<td>
<input type="hidden" value="300" name="amount2">
</td>
<td>
<input type="checkbox" name="include2">
</td>
</tr>
</table>
</td>
</tr>
</table>


$(document).ready(function() {
function sumRows() {
var sum = 0,
total = $('#total');
$('#myteam tr').each(function() {
var amount = $(this).find('input[name="amount"]'),
checkbox = $(this).find('input[name="include"]');
if (checkbox.is(':checked') && amount.val().length > 0) {
sum += parseInt(amount.val(), 10);
}
});
total.text(sum);
$("#diff").text(Math.abs(sum - parseInt(total2.innerText)));
}
function sumRows2() {
var sum2 = 0,
total2 = $('#total2');
$('#otherteam tr').each(function() {
var amount2 = $(this).find('input[name="amount2"]'),
checkbox2 = $(this).find('input[name="include2"]');
if (checkbox2.is(':checked') && amount2.val().length > 0) {
sum2 += parseInt(amount2.val(), 10);
}
});
total2.text(sum2);
$("#diff").text(Math.abs(parseInt(total.innerText)- sum2));
}
// calculate sum anytime checkbox is checked or amount is changed
$('input[name="amount"], input[name="include"]').on('change keyup blur', sumRows);
$('input[name="amount2"], input[name="include2"]').on('change keyup blur', sumRows2);
});

Related

Count how many are checked from generated checkbox

I'm working on a simple table that generates number of checkbox, and count the total of how many are checked.
when I unchecked, it will show how many are the remaining checked checkbox.
my problem is when I generate new rows the counter doesn't work anymore.
$('.items').keyup(function() {
var items = $(this).val();
$('span').text(items);
$('table tbody tr').remove();
for (var i = 1; i <= items; i++) {
$('table > tbody').append('<tr><td><input type="checkbox" checked></td></tr>');
}
});
$('input:checkbox').click(function() {
var count = $(this).closest('table').find('input:checkbox:checked').length;
$('span').text(count);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="">
Items
</label>
<input type="text" class="items">
<span>4</span>
<table>
<tbody>
<tr>
<td>
<input type="checkbox" checked>
</td>
</tr>
<tr>
<td>
<input type="checkbox" checked>
</td>
</tr>
<tr>
<td>
<input type="checkbox" checked>
</td>
</tr>
<tr>
<td>
<input type="checkbox" checked>
</td>
</tr>
</tbody>
</table>

Use event delegation instead, so that you only need to apply a single listener to the container, otherwise you'll have to re-add listeners to each element every time:
$('.items').keyup(function() {
var items = $(this).val();
$('span').text(items);
$('table tbody tr').remove();
for (var i = 1; i <= items; i++) {
$('table > tbody').append('<tr><td><input type="checkbox" checked></td></tr>');
}
});
$('table').on('click', 'input', function() {
var count = $(this).closest('table').find('input:checkbox:checked').length;
$('span').text(count);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="">
Items
</label>
<input type="text" class="items">
<span>4</span>
<table>
<tbody>
<tr>
<td>
<input type="checkbox" checked>
</td>
</tr>
<tr>
<td>
<input type="checkbox" checked>
</td>
</tr>
<tr>
<td>
<input type="checkbox" checked>
</td>
</tr>
<tr>
<td>
<input type="checkbox" checked>
</td>
</tr>
</tbody>
</table>

$('.items').keyup(function() {
var items = $(this).val();
$('span').text(items);
$('table tbody tr').remove();
for (var i = 1; i <= items; i++) {
$('table > tbody').append('<tr><td><input class="checkeboxclass" type="checkbox" checked></td></tr>');
}
});
$('input[type="checkbox"]').on( "change", function() {
var count = $('input[type="checkbox"]:checked').length;
$('span').text(count);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="">
Items
</label>
<input type="text" class="items">
<span>4</span>
<table>
<tbody>
<tr>
<td>
<input type="checkbox" checked>
</td>
</tr>
<tr>
<td>
<input type="checkbox" checked>
</td>
</tr>
<tr>
<td>
<input type="checkbox" checked>
</td>
</tr>
<tr>
<td>
<input type="checkbox" checked>
</td>
</tr>
</tbody>
</table>

Auto calculation value getting change in text-box but not in dom

I struck up with a weird problem :I am done a calculation based on change in the value in the quantity cell will multiply by parent cell in a row
Here my fiddle link :https://jsfiddle.net/hahkarthick/0y0d4vge/16/
So far the calculation works perfectly the only problem is when i check the dom i didn't see any change in value that i see it remains old value
(i.e:)2 is cell and 0 in quantity cell if change quantity to 5 then 2 get multiplied with 5 and changed to 10 ,but when i check the Dom the value remains 2 .
$(document).ready(function() {
$('.quantity').on('change, keyup', function() {
var val = $(this).val();
console.log(val)
// To avoid auto inc while pressing arrow keys
var preVal = $(this).data('val');
$(this).data('val', val);
//To avoid auto inc while pressing arrow keys //
if (val == '' || isNaN(val) || val < 1 || val == undefined) {
val = 1;
}
$(this).parent().siblings().each(function() {
var oldval = $(this).find('.calc').data("val") || $(this).find('.calc').val() || "0";
var arr = String(oldval).split("[");
console.log(arr);
//var newval = val * oldval;
var newval = (val * parseFloat(arr[0])).toFixed(2);
console.log(newval);
if (arr.length > 1) {
newval = newval + "[" + arr[1];
}
$(this).find('.calc').val(newval);
});
autoSum();
});
autoSum();
});
function autoSum() {
var $dataRows = $("#sum_table tr:not('.total, .title')");
var totals = [0, 0, 0];
$dataRows.each(function() {
$(this).find('input').each(function(i) {
totals[i] += parseFloat($(this).val());
});
});
$("#sum_table td.totalCol").each(function(i) {
$(this).html("total:" + totals[i]);
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<h2>Table calculation</h2>
<p>Calculaton</p>
<p>Change quantity column for calculation</p>
<table class="auto_sum table table-hover" id="sum_table">
<thead>
<tr class="title">
<th>value1</th>
<th>value2</th>
<th>value3</th>
<th>Quantity</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input data-val="20[2]" class="calc" type="text" data-val="" value="20[2]" name="">
</td>
<td>
<input class="calc" data-val="[10]" type="number" data-val="" value="10" name="">
</td>
<td>
<input type="number" data-val="10" value="10" name="">
</td>
<td>
<input class="quantity" type="number" name="">
</td>
</tr>
<tr>
<td>
<input class="calc" type="number" data-val="5" value="5" name="">
</td>
<td>
<input class="calc" type="number" data-val="6" value="6" name="">
</td>
<td>
<input type="number" data-val="" value="12" name="">
</td>
<td>
<input class="quantity" type="number" name="">
</td>
</tr>
<tr>
<td>
<input class="calc" type="number" data-val="45" value="45" name="">
</td>
<td>
<input class="calc" type="number" data-val="23" value="23" name="">
</td>
<td>
<input type="number" data-val="" value="22" name="">
</td>
<td>
<input class="quantity" type="number" name="">
</td>
</tr>
<tr class="totalColumn">
<td class="totalCol">Total:</td>
<td class="totalCol">Total:</td>
<td class="totalCol">Total:</td>
<td></td>
</tr>
</tbody>
</table>
</div>

Auto calculation in jQuery error

.
Iam Try To do calculation column 1 & column 2 and and value inside[] should consider .
so far i am able to calculate particular columns while using split function iam getting error .
eg: in first cell iam having value with [] its calculating correctly if i enter without [] it dosen't doing calculation and shows error
This is my fiddle link
https://jsfiddle.net/hahkarthick/0y0d4vge/2/
$(document).ready(function(){
$('.quantity').on('change, keyup',function(){
var val=$(this).val();
console.log(val)
// To avoid auto inc while pressing arrow keys
var preVal =$(this).data('val');
$(this).data('val',val);
//To avoid auto inc while pressing arrow keys //
if(val =='' || isNaN(val) || val < 1 || val == undefined){
val = 1;
}
$(this).parent().siblings().each(function(){
var oldval = $(this).find('.calc').data("val");
alert(oldval);
var arr = oldval.split("[");
console.log(arr);
//var newval = val * oldval;
var newval = (val * parseFloat(arr[0])).toFixed(2);
console.log(newval);
if(arr.length > 1) {
newval = newval + "[" + arr[1];
}
$(this).find('input').val(newval);
});
autoSum();
});
autoSum();
});
function autoSum(){
var $dataRows=$("#sum_table tr:not('.total, .title')");
var totals=[0,0,0];
$dataRows.each(function() {
$(this).find('input').each(function(i){
totals[i]+=parseFloat( $(this).val());
});
});
$("#sum_table td.totalCol").each(function(i){
$(this).html("total:"+totals[i]);
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<h2>Table calculation</h2>
<p>Calculaton</p>
<table class="auto_sum table table-hover" id="sum_table">
<thead>
<tr class="title">
<th>value1</th>
<th>value2</th>
<th>value3</th>
<th>Quantity</th>
</tr>
</thead>
<tbody>
<tr>
<td><input data-val="20[2]" class="calc" type="text" data-val="" value="20[2]" name=""></td>
<td><input class="calc" data-val="[10]" type="number" data-val="" value="10" name=""></td>
<td><input type="number" data-val="" value="10" name=""></td>
<td><input class="quantity" type="number" name=""></td>
</tr>
<tr>
<td><input class="calc" type="number" data-val="" value="5" name=""></td>
<td><input class="calc" type="number" data-val="" value="6" name=""></td>
<td><input type="number" data-val="" value="12" name=""></td>
<td><input class="quantity" type="number" name=""></td>
</tr>
<tr>
<td><input class="calc" type="number" data-val="" value="45" name=""></td>
<td><input class="calc" type="number" data-val="" value="23" name=""></td>
<td><input type="number" data-val="" value="22" name=""></td>
<td><input class="quantity" type="number" name=""></td>
</tr>
<tr class="totalColumn">
<td class="totalCol">Total:</td>
<td class="totalCol">Total:</td>
<td class="totalCol">Total:</td>
<td></td>
</tr>
</tbody>
</table>
</div>
Thanks in Advance

See fiddle: https://jsfiddle.net/maxbilbow/0y0d4vge/7/
If data-val == "", this can return undefined. I've altered this line:
var oldval = $(this).find('.calc').data("val") || "0";
And, to be safe, cast oldval to String so that the split function works.
var arr = String(oldval).split("[");
I've also specified a class for the siblings:
$(this).parent().siblings('.calc-cell')
$(document).ready(function() {
$('.quantity').on('change, keyup', function() {
var val = $(this).val();
console.log(val)
// To avoid auto inc while pressing arrow keys
var preVal = $(this).data('val');
$(this).data('val', val);
//To avoid auto inc while pressing arrow keys //
if (val == '' || isNaN(val) || val < 1 || val == undefined) {
val = 1;
}
$(this).parent().siblings('.calc-cell').each(function() {
var $calc = $(this).find('.calc');
var oldval = $calc.data("val") || $calc.val() || "0";
var arr = String(oldval).split("[");
console.log(arr);
//var newval = val * oldval;
var newval = (val * parseFloat(arr[0])).toFixed(2);
console.log(newval);
if (arr.length > 1) {
newval = newval + "[" + arr[1];
}
$(this).find('input').val(newval);
});
autoSum();
});
autoSum();
});
function autoSum() {
var $dataRows = $("#sum_table tr:not('.total, .title')");
var totals = [0, 0, 0];
$dataRows.each(function() {
$(this).find('input').each(function(i) {
totals[i] += parseFloat($(this).val());
});
});
$("#sum_table td.totalCol").each(function(i) {
$(this).html("total:" + totals[i]);
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<h2>Table calculation</h2>
<p>Calculaton</p>
<table class="auto_sum table table-hover" id="sum_table">
<thead>
<tr class="title">
<th>value1</th>
<th>value2</th>
<th>value3</th>
<th>Quantity</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input data-val="20[2]" class="calc" type="text" data-val="" value="20[2]" name="">
</td>
<td>
<input class="calc" data-val="[10]" type="number" data-val="" value="10" name="">
</td>
<td>
<input type="number" data-val="10" value="10" name="">
</td>
<td>
<input class="quantity" type="number" name="">
</td>
</tr>
<tr>
<td class="calc-cell">
<input class="calc" type="number" data-val="5" value="5" name="">
</td>
<td class="calc-cell">
<input class="calc" type="number" data-val="6" value="6" name="">
</td>
<td>
<input type="number" data-val="" value="12" name="">
</td>
<td>
<input class="quantity" type="number" name="">
</td>
</tr>
<tr>
<td>
<input class="calc" type="number" data-val="45" value="45" name="">
</td>
<td>
<input class="calc" type="number" data-val="23" value="23" name="">
</td>
<td>
<input type="number" data-val="" value="22" name="">
</td>
<td>
<input class="quantity" type="number" name="">
</td>
</tr>
<tr class="totalColumn">
<td class="totalCol">Total:</td>
<td class="totalCol">Total:</td>
<td class="totalCol">Total:</td>
<td></td>
</tr>
</tbody>
</table>
</div>

Checkbox JavaScript does not update values

I have a table with rows of textboxes as inputs that hold numbers/hours with css .hours. I am trying to get the table to update totals when the row is deleted checkbox is checked/clicked.
How to Update the totals in the row & col at the End? when the delete row checkbox is checked.
2 steps: I zero out the values in the deleted row, and then want to update the new totals.
JS fiddle with HTML
// Call this function, When CheckBox with css .deleteRowis clicked
$('#Maintable').on('click', '.deleteRow', function ()
{
if ($(this).is(":checked")) {
var row = $(this).closest('tr').css({ 'color': 'red' });
var hours = row.find('.hours');
$.each(hours, function (index, item) {
if ($(this).val()) { // if there is a value
$(this).val('0');
// Total the rows does not work??
HoursChangedFunction($(this));
}
});
} // :checked ends
// when the row is deleted from the checkbox, find it and call this function
// 1) First make all .hours 0, 2) and then redo the totals
var HoursChangedFunction = function () {
var columnIndex = $(this).closest('td').index();
var row = $(this).closest('tr');
var hours = row.find('.hours');
var rowTotal = 0;
$.each(hours, function (index, item) {
rowTotal += Number($(this).val());
});
row.children('td.rowtotal').text(rowTotal.toFixed(2));
var columnTotal = 0;
var grandTotal = 0;
var rows = $('#Maintable tr');
$.each(rows, function (index, item) {
columnTotal += Number($(this).children('td').eq(columnIndex).children('.hours').val());
grandTotal += Number($(this).children('.rowtotal').text());
});
footer.eq(columnIndex).text(columnTotal.toFixed(2));
total.text(grandTotal.toFixed(2));
};

Because you have a lot of IDs you may avoid HoursChangedFunction.
In order to get the corresponding cell in the current col you can use the eq method
Moreover, you can use .text( function ) to simplify the task.
You can simplify the event handler from:
$('#Maintable').on('click', '.deleteRow', function ()
to:
$('#Maintable').on('change', '.deleteRow:checked', function () {
because inside the handler you execute the logic only when the checkbox is checked.
The snippet:
$('#Maintable').on('change', '.deleteRow:checked', function () {
var row = $(this).closest('tr').css({'color': 'red'});
$('#grandtotal').text(function(idx, txt) {
return (+txt - +row.find('.rowtotal').text()).toFixed(2);
});
row.find('.rowtotal').text('0.00');
row.find('.hours').each( function (index, item) {
if (item.value != '0.00') {
$('#Maintable').closest('table').find('tfoot tr td').eq(index + 2).text(function(idx, txt) {
return (+txt - +item.value).toFixed(2);
});
item.value = '0.00';
}
});
});
.hours {
width: 50px;
box-sizing: border-box;
border: solid 1px #d9e1e4;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>Task</th>
<th>Code</th>
<th>day1</th>
<th>day2</th>
<th>dy3</th>
<th>day4</th>
<th>day5</th>
<th>day6</th>
<th>day7</th>
<th>Total</th>
<th>Del</th>
</tr>
</thead>
<tbody id="Maintable">
<tr>
<td>
<span class="project">Project 1</span>
</td>
<td>
<span class="timecode">code 1A</span>
</td>
<td>
<input class="hours" type="text" value="0.00">
</td>
<td>
<input class="hours" type="text" value="2.50">
</td>
<td>
<input class="hours" type="text" value="4.00">
</td>
<td>
<input class="hours" type="text" value="0.00">
</td>
<td>
<input class="hours" type="text" value="0.00">
</td>
<td>
<input class="hours" type="text" value="0.00">
</td>
<td>
<input class="hours" type="text" value="0.00">
</td>
<td class="rowtotal">6.50</td>
<td><input class="bs-checkbox deleteRow" data-val="true" type="checkbox" value="true"></td>
</tr>
<tr>
<td>
<span class="project">Project 2</span>
</td>
<td>
<input type="hidden" name="Records.Index" value="1">
<span class="timecode">code 2B</span>
</td>
<td>
<input class="hours" type="text" value="0.00">
</td>
<td>
<input class="hours" type="text" value="4.50">
</td>
<td>
<input class="hours" type="text" value="0.00">
</td>
<td>
<input class="hours" type="text" value="0.00">
</td>
<td>
<input class="hours" type="text" value="0.00">
</td>
<td>
<input class="hours" type="text" value="0.00">
</td>
<td>
<input class="hours" type="text" value="0.00">
</td>
<td class="rowtotal">4.50</td>
<td><input class="bs-checkbox deleteRow" data-val="true" type="checkbox" value="true"></td>
</tr>
<tr>
<td>
<span class="project">Project 3</span>
</td>
<td>
<span class="timecode">code 2C</span>
</td>
<td>
<input class="hours" type="text" value="0.00">
</td>
<td>
<input class="hours" type="text" value="0.50">
</td>
<td>
<input class="hours" type="text" value="0.00">
</td>
<td>
<input class="hours" type="text" value="0.00">
</td>
<td>
<input class="hours" ype="text" value="0.00">
</td>
<td>
<input class="hours" type="text" value="0.00">
</td>
<td>
<input class="hours" type="text" value="0.00">
</td>
<td class="rowtotal">0.50</td>
<td><input class="bs-checkbox deleteRow" data-val="true" type="checkbox" value="true"></td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td></td>
<td>0.00</td>
<td>7.50</td>
<td>4.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td id="grandtotal">11.50</td>
</tr>
</tfoot>
</table>

innerHTML firstChild.value works in IE9 IE8 but not IE10, Firefox, Chrome

The following code works in IE8,9 but not in IE10, Firefox or chrome.
The calculations are correct in IE8,9 and older versions but in IE10, FF ,chrome the calculated values in the respective columns and rows show up as NaN.
I have provided the entire code.
Any help will be greatly appreciated.
Thank you all in advance.
<html>
<head></head>
<script type="text/javascript">
function enable_text(che, inp, cost) {
if (che.checked) {
var c = inp;
var d = cost;
document.getElementById('gate_req_' + c).value = d;
}
else {
var c = inp;
var d = cost;
document.getElementById('gate_req_' + c).value = 0;
}
}
</script>
<body>
<form action="" method="post" name="f1" id="f1">
<table width='95%' border='1' id='tableId' name='tableId'>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
<td>E</td>
<td>Cost</td>
<td>discount yes/ no</td>
<td>Discount amount</td>
<td>Subtotal (Cost - Discount Amount)</td>
</tr>
<tr>
<td>J</td>
<td>K</td>
<td>L</td>
<td>M</td>
<td bgcolor='#F4F4F4'>N</td>
<td id='enteredValues'>
<input name='CourseCost' readonly size='6' value=1600>
</td>
<td>
<input type='checkbox' name='check_box_[]' value=1819 onclick='enable_text(this,0,1600);calc(); ' />
<input type='hidden' name='check_box_uncheck[]' value=1819
/>
</td>
<td id='enteredValues'>
<input type='text' name='gate_req_[]' value='0' readonly id='gate_req_0' />
</td>
<td id='enteredValues'> </td>
</tr>
<tr>
<td>O</td>
<td>P</td>
<td>Q</td>
<td>R</td>
<td bgcolor='#F4F4F4'>S</td>
<td id='enteredValues'>
<input name='CourseCost' readonly size='6' value=1600>
</td>
<td>
<input type='checkbox' name='check_box_[]' value=1821 onclick='enable_text(this,1,1600);calc(); ' />
<input type='hidden' name='check_box_uncheck[]' value=1821
/>
</td>
<td id='enteredValues'>
<input type='text' name='gate_req_[]' value='0' readonly id='gate_req_1' />
</td>
<td id='enteredValues'> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td align='left'>Com</td>
<td align='left'>
<input name='Registration_fee' type='text' value='200' size=6 readonly />
</td>
<td> </td>
<td>
<input name='Registration0fee' value='0' size=6 readonly />
</td>
<td align='left'>
<input name='Registration_fee' value='200' size=6 />
</td>
</tr>
<tr id='columnTotals' name='columnTotals'>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>= N +S + Com</td>
<td>
<input id='sum1' name='sum1' type='text' readonly>
</td>
<td> </td>
<td>
<input id='sum2' name='sum2' type='text' readonly>
= Discount Amount Subtotal
</td>
<td>
<input id='sum3' type='text' name='sum3' readonly>
= Total
</td>
</table>
</body>
<script type="text/javascript">
window.onload = function () {
var enteredValues = document.getElementById("tableId");
var inputs = enteredValues.getElementsByTagName("input");
var columnTotals = document.getElementById("columnTotals");
(function calc() {
var col_1_total = 0, col_2_total = 0, col_3_total = 0;//initialise running totals to zero
for (var i = 1; i < enteredValues.rows.length - 1; i++) {
var cells = enteredValues.rows[i].cells;
col_1_total += Number(cells[5].firstChild.value);
col_2_total += Number(cells[7].firstChild.value);
col_3_total += Number(cells[8].innerHTML = cells[5].firstChild.value - cells[7].firstChild.value);
}
document.getElementById("sum1").setAttribute("value", col_1_total)
document.getElementById("sum2").setAttribute("value", col_2_total)
document.getElementById("sum3").setAttribute("value", col_3_total)
})();//execute calc() immediately to cater for any initial values
for (var i = 1; i < inputs.length - 1; i++) {
inputs[i].onchange = calc;
}//attach calc as onblur handler to input fields.
};
</script>
<script>
function calc() {
var enteredValues = document.getElementById("tableId");
var inputs = enteredValues.getElementsByTagName("input");
var columnTotals = document.getElementById("columnTotals");
var col_1_total = 0, col_2_total = 0, col_3_total = 0;//initialise running totals to zero
for (var i = 1; i < enteredValues.rows.length - 1; i++) {
var cells = enteredValues.rows[i].cells;
col_1_total += Number(cells[5].firstChild.value);
col_2_total += Number(cells[7].firstChild.value);
col_3_total += Number(cells[8].innerHTML = cells[5].firstChild.value - cells[7].firstChild.value);
}
document.getElementById("sum1").setAttribute("value", col_1_total)
document.getElementById("sum2").setAttribute("value", col_2_total)
document.getElementById("sum3").setAttribute("value", col_3_total)
}
</script>
</html>

col_1_total += Number(cells[5].getElementsByTagName("input")[0].value);
col_2_total += Number(cells[7].getElementsByTagName("input")[0].value);
col_3_total += Number(cells[8].innerHTML = cells[5].getElementsByTagName("input")[0].value - cells[7].getElementsByTagName("input")[0].value);
firstChild is a text node (caused by whitespaces between <td> and <input>), not the input element you apparently want.
Also, your code is quite redundant and not exactly valid html - calc() is defined two times, tags on the level instead of /, a closing is missing, and so on... please consider rewriting that whole thing.

Categories

Resources