i wrote the blow code to generate tr for my table based on a total count .
there is a input type text that contains a number and i want to generatge tr for my table according to that number
but it is not working .
here is my snippet :
function findTotal(){
var table = $("#travells");
var rowNum = parseInt($("#total").val(), 10);
var resultHtml = '';
for(var i = 0 ; i < rowNum ; i++) {
resultHtml += ["<tr>",
"<td>",
(i+1),
"</td>",
'<td><input type="name" placeholder="text goes here..."></td>',
'<td><input type="name" placeholder="text goes here..."></td>',
'</tr>'].join("\n");
}
table.html(resultHtml);
return false;
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body onload="findTotal()">
<input type="text" value="8" id="total"/>
<table id="travells">
<thead>
<tr class="travelcounting">
<th>name</th>
<th>gender</th>
<th>country</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" id="Name" readonly/></td>
<td class="columns"><input type="text" id="gender" readonly/></td>
<td class="columns"><input type="text" id="country" readonly/></td>
</tr>
</tbody>
</table>
</body>
$( document ).ready(function() {
var table = $("#travells");
var rowNum = parseInt($("#total").val(), 10);
var resultHtml = '';
for(var i = 0 ; i < rowNum ; i++) {
resultHtml += ["<tr>",
"<td>",
(i+1),
"</td>",
'<td><input type="name" placeholder="text goes here..."></td>',
'<td><input type="name" placeholder="text goes here..."></td>',
'</tr>'].join("\n");
}
table.html(resultHtml);
return false;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<input type="hidden" value="8" id="total"/>
<table id="travells">
<thead>
<tr class="travelcounting">
<th>name</th>
<th>gender</th>
<th>country</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" id="Name" readonly/></td>
<td class="columns"><input type="text" id="gender" readonly/></td>
<td class="columns"><input type="text" id="country" readonly/></td>
</tr>
</tbody>
</table>
When constructing these kind of strings, the new template literals from ES6 are a good fit. See here for more info: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals
function findTotal(){
var body = document.getElementsByTagName("tbody")[0];
var rowNum = parseInt(document.getElementById("total").value, 10);
var resultHtml = '';
for(var i = 0 ; i < rowNum ; i++) {
resultHtml += `<tr>
<td>
${(i + 1)}
</td>
<td>
<input type="name" placeholder="text goes here...">
</td>
<td>
<input type="name" placeholder="text goes here...">
</td>
</tr>`;
};
body.innerHTML = resultHtml;
};
<body onload="findTotal()">
<input type="text" value="8" id="total"/>
<table id="travells">
<thead>
<tr class="travelcounting">
<th>name</th>
<th>gender</th>
<th>country</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" id="Name" readonly/></td>
<td class="columns"><input type="text" id="gender" readonly/></td>
<td class="columns"><input type="text" id="country" readonly/></td>
</tr>
</tbody>
</table>
</body>
$("#RowC").on("click",function(){
var TRCnt=$("tbody >tr").length;
for(var i=TRCnt;i< (parseInt($("#RowNum").val())+TRCnt);i++){
let tr=$("<tr/>");
let inputName=$("<input/>",{type:"text",name:"name",placeholder:"name",value:i+1});
let inputGender=$("<input/>",{type:"text",name:"gender",placeholder:"gender"});
let inputCountry=$("<input/>",{type:"text",name:"country",placeholder:"country"});
tr.append($("<td/>").html(inputName));
tr.append($("<td/>").html(inputGender));
tr.append($("<td/>").html(inputCountry));
$("tbody").append(tr);
};
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" id="RowNum" />
<input type="button" id="RowC" value="click" />
<hr>
<table>
<thead>
<tr>
<th>name</th>
<th>gender</th>
<th>country</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
This is the jquery code:
$("#submitButton").click(function() {
var table = $("#resultTable");
var rowNum = parseInt($("#table-row-num").val(), 10);
var resultHtml = '';
for(var i = 0 ; i < rowNum ; i++) {
resultHtml += ["<tr>",
"<td>",
(i+1),
"</td>",
'<td><input type="name" placeholder="text goes here..."></td>',
'<td><input type="name" placeholder="text goes here..."></td>',
'</tr>'].join("\n");
}
table.html(resultHtml);
return false;
});
I wish you luck with implementation. :)
The Demo here: http://jsfiddle.net/fpd8dwtw/20/
Related
Can someone here help me with this? The problem with this code is that when you add column(add supplier) it can't get the grand total for each total column. Does anyone here know how to solve this? It will be a big help with my project. Thanks in advance. This is my javascript that calculates the total (not the grand total)
$(function() {
$('#add_supplier').click(function() {
$('#supplier_table > thead > tr#first-header').append('<th colspan="2" class="supplier_name">Supplier</th>');
$('#supplier_table > thead > tr#second-header').append(
'<th>Price</th>' +
'<th>Total</th>'
);
$('#supplier_table > tbody > tr').append(
'<td><input type="text" class="form-control price text-right" ></td>' +
'<td><input type="text" class="form-control total text-right" readonly></td>'
);
$('#grandtotal > tbody > tr').append(
'<td><input class="form-control" disabled></td>' +
'<td><input type="text" class="form-control grandtotal text-right" readonly=""></td>'
);
refresh_index();
});
$('#add_item').click(function() {
$('#supplier_table tbody').append($("#supplier_table tbody tr:last").clone());
refresh_index();
});
function refresh_index() {
$('.price').each(function(i) {
i++;
$(this).attr('id', 'price-' + i);
$(this).attr('data-num', i);
event_handler();
});
$('.total').each(function(i) {
i++;
$(this).attr('id', 'total-' + i);
});
$('.qty').each(function(i) {
i++;
$(this).attr('id', 'qty-' + i);
});
$('.grandtotal').each(function(i) {
i++;
$(this).attr('id', 'grandtotal-' + i);
});
$('.supplier_name').each(function(i) {
i++;
$(this).attr('id', 'supplier_name-' + i);
});
}
refresh_index();
function event_handler() {
$('.price').unbind('keyup').bind('keyup', function() {
var id = this.id;
var num = id.split('-');
var pos = $(this).closest('tr').index() + 1;
var qty = $('#qty-' + pos).val();
var price = $(this).val();
var total = parseFloat(qty) * parseFloat(price);
if (isNaN(total)) {
var total = 0;
}
$('#total-' + num[1]).val(total);
var num_of_supplier_name = $('.supplier_name').length;
sum_of_total(num_of_supplier_name);
});
}
function sum_of_total(num) {
var sum = 0;
//iterate through each textboxes and add the values
$(".total").each(function() {
//add only if the value is number
if (!isNaN($(this).val()) && $(this).val().length != 0) {
sum += parseFloat(this.value);
}
});
//.toFixed() method will roundoff the final sum to 2 decimal places
$("#grandtotal-" + num).val(sum);
}
});
#supplier_table thead th,
td {
text-align: center;
}
#grandtotal tbody input:disabled {
border: none;
border-color: transparent;
background-color: transparent;
outline: none;
box-shadow: inset 0px 0px 0px 0px red;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<h2>Bordered Table</h2>
<p>The .table-bordered class adds borders to a table:</p>
<button type="button" class="btn btn-default" id="add_supplier">Add Supplier</button>
<button type="button" class="btn btn-default" id="add_item">Add Item</button>
<table class="table table-bordered" id="supplier_table">
<thead>
<tr id="first-header">
<th></th>
<th></th>
<th colspan="2" class="supplier_name" id="supplier_name-1">Supplier</th>
</tr>
<tr id="second-header">
<th>Item</th>
<th>Qty</th>
<th>Price</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr class="tbody-tr">
<td><input type="text" class="form-control" value="Mouse" readonly=""></td>
<td><input type="text" class="form-control qty" value="10" readonly=""></td>
<td><input type="text" class="form-control price"></td>
<td><input type="text" class="form-control total for_sum-1" readonly=""></td>
</tr>
<tr class="tbody-tr">
<td><input type="text" class="form-control" value="Keyboard" readonly=""></td>
<td><input type="text" class="form-control qty" value="20" readonly=""></td>
<td><input type="text" class="form-control price"></td>
<td><input type="text" class="form-control total for_sum-1" readonly=""></td>
</tr>
<tr class="tbody-tr">
<td><input type="text" class="form-control" value="Monitor" readonly=""></td>
<td><input type="text" class="form-control qty" value="30" readonly=""></td>
<td><input type="text" class="form-control price"></td>
<td><input type="text" class="form-control total for_sum-1" readonly=""></td>
</tr>
</tbody>
<table class="table table-bordered" id="grandtotal">
<thead>
<tr>
</tr>
</thead>
<tbody>
<tr>
<td><input class="form-control" disabled=""></td>
<td><input class="form-control" disabled=""></td>
<td><input class="form-control" disabled value="Grand Total : " style="text-align: right;"></td>
<td><input type="text" class="form-control grandtotal text-right" readonly=""></td>
</tr>
</tbody>
</table>
</table>
</div>
Demo jsFiddle
The reason is an easy mistake often made in jQuery.
Your code is interpreted at first page load, all subsequent changes in the DOM are ignored.
There is an easy trick to always interpret all .totals.
Make "body" to find all "totals".
function sum_of_total(num) {
var sum = 0;
//iterate through each textboxes and add the values
$("body").find(".total").each(function() {
//add only if the value is number
if (!isNaN($(this).val()) && $(this).val().length != 0) {
sum += parseFloat(this.value);
}
});
//.toFixed() method will roundoff the final sum to 2 decimal places
$("#grandtotal-" + num).val(sum);
}
working fiddle: https://jsfiddle.net/juf54wby/
using this code i can already calculate two value in row now I am trying to sum column values below local column field all column value with this,
<table class="table order-list turf" id="turf">
<tr>
<td>Items</td>
<td>Local</td>
<td>Foreign</td>
<td>Total</td>
</tr>
<tr>
<td class="col-sm-3"><input type="text" name="" value="item1"></td>
<td class="col-sm-3 calculated_value">
<input type="text" name="value1[]" class="calculated_value"/></td>
<td class="col-sm-3 calculated_value">
<input type="text" name="value2[]" class="form-control calculated_value" />
</td>
<td class="col-sm-3 total">
<input type="text" name="total[]" class="form-control total" id="total" readonly="" />
</td>
<td class="col-sm-2"><a class="deleteRow"></a>
<input type="button" class="btn btn-sm btn-success " id="addrow" value="Add" />
</td>
</tr>
<tr class="grand-total persist">
<td>Total Investment</td>
<td id="local_total"><input type="text" readonly="" name=""></td>
<td id="foreign_total"><input type="text" readonly="" name=""></td>
<td id="total_total"><input type="text" readonly="" name=""></td>
</tr>
</table>
var counter = 1;
$("body").on("input", ".calculated_value", function() {
var parent_row = $(this).closest('tr');
var totalincome = 0;
parent_row.find('.calculated_value').each(function() {
totalincome += parseInt($(this).val() || 0);
});
parent_row.find(".total").val(totalincome);
Demo
I hope this is what you need. Code could be refactored but I think you can do it yourself.
$(document).ready(function() {
var counter = 1;
$("body").on("input", ".calculated_value", function() {
calculate(this);
});
function calculate(elm) {
var parent_row = $(elm).closest('tr');
var elTotalIncome = $("#local_milion_grand_total").find("input");
var elTotalForeign = $("#foreign_milion_grand_total").find("input");
var elTotal = $('#total_milion_grand_total').find("input");
var totalincome = 0;
var totalLocal = 0;
var totalForeign = 0;
var total = 0;
parent_row.find('.calculated_value').each(function() {
totalincome += parseInt($(this).val() || 0);
});
parent_row.find('.total').val(totalincome);
for (i = 0; i < $("tbody tr").length; i++) {
let elCol = $($("tbody tr")[i]).find("td input");
let tmp = parseInt(elCol[1].value);
let tmp2 = parseInt(elCol[2].value);
let tmp3 = parseInt(elCol[3].value);
if (isNaN(tmp)) tmp = 0;
if (isNaN(tmp2)) tmp2 = 0;
if (isNaN(tmp3)) tmp3 = 0;
totalLocal += tmp;
totalForeign += tmp2;
total += tmp3;
}
elTotal.val(total);
elTotalIncome.val(totalLocal);
elTotalForeign.val(totalForeign);
}
//add new row button
$("#addrow").on("click", function() {
var newRow = $("<tr>");
var cols = "";
cols += '<td><input type="text" value="Item ' + counter + '"></td>';
cols += '<td><input type="text" class="form-control calculated_value" name="value1[]"></td>';
cols += '<td><input type="text" class="form-control calculated_value" name="foreign_milion[]"></td>';
cols += '<td><input type="text" class="form-control total" name="total_milion[]" readonly></td>';
cols += '<td><input type="button" class="ibtnDel btn btn-md btn-danger " value="Delete"></td>';
newRow.append(cols);
$("table.order-list").append(newRow);
counter++;
});
$("table.order-list").on("click", ".ibtnDel", function(event) {
if (counter == 1) return;
$(this).closest("tr").remove();
counter -= 1
calculate(this);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table class="table order-list turf" id="turf">
<thead>
<tr>
<td>Items</td>
<td>Local(Milion Taka/Milion US$)</td>
<td>Foreign(Milion Taka/Milion US$)</td>
<td>Total(Milion Taka/Milion US$)</td>
<td> <input type="button" class="btn btn-sm btn-success " id="addrow" value="Add" /></td>
</tr>
</thead>
<tbody>
<tr>
<td class="col-sm-3">
<input type="text" name="" value="item1">
</td>
<td class="col-sm-3 calculated_value">
<input type="text" name="value1[]" class="form-control calculated_value_row calculated_value" />
</td>
<td class="col-sm-3 calculated_value">
<input type="text" name="value2[]" class="form-control calculated_value_row calculated_value" />
</td>
<td class="col-sm-3 total">
<input type="text" name="total[]" class="form-control total" id="total" readonly="" />
</td>
<td><input type="button" class="ibtnDel btn btn-md btn-danger " value="Delete"></td>
</tr>
</tbody>
<tfoot>
<tr class="grand-total persist">
<td>Total Investment</td>
<td id="local_milion_grand_total"><input type="text" class="form-control local_milion_grand_total" readonly="" name=""></td>
<td id="foreign_milion_grand_total"><input type="text" class="form-control" readonly="" name=""></td>
<td id="total_milion_grand_total"><input type="text" class="form-control" readonly="" name=""></td>
</tr>
</tfoot>
</table>
This is my complete code.I have used "for" to copy the table n-times.But A function "copy(Selector)" runs only at 1st table and not working in subsequent copied tables.Am a beginner and help me out with solution or alter the code.
And This is my fiddle https://jsfiddle.net/3shjhu98/3/
<!Doctype HTML>
<html>
<head>
<style>
table {
border-collapse: collapse
}
td {
border: 1px solid black;
height: 100%;
}
p001 {
border: none;
}
table {
counter-reset: section;
}
.count:before {
counter-increment: section;
content: counter(section);
}
</style>
<script type="text/javascript">
var num, i, c;
j = 1;
function cloneRow() {
num = document.getElementById("copying number").value;
for (i = 0; i < num - 1; i++) {
var row = document.getElementById("rowToClone");
var table = document.getElementById("tableToModify");
var clone = row.cloneNode(true);
clone.id = "newID";
table.appendChild(clone);
document.getElementById("Name1").value = "";
document.getElementById("Name2").value = "";
document.getElementById("Name3").value = "";
document.getElementById("Name4").value = "";
}
function createRow() {
var row = document.createElement('tr');
var col = document.createElement('td');
var col2 = document.createElement('td');
row.appendChild(col);
row.appendChild(col2);
var table = document.getElementById("tableToModify");
table.appendChild(row);
}
}
</script>
<script>
function copy(selector) {
var text1 = document.getElementById(selector + "1").value;
document.getElementById(selector + "2").value = text1;
var text2 = document.getElementById(selector + "3").value;
document.getElementById(selector + "4").value = text2;
}
</script>
<body>
<form>
<h4>Enter the number of times to be copied</h4>
<input type="text" id="copying number" placeholder="Enter Here">
<input type="reset" value="clear">
</form>
<br>
<br>
<input type="submit" value="Copy row" onclick="cloneRow()">
<br><br>
<table width="100%" id="tableToModify">
<tbody id="rowToClone">
<tr>
<td colspan="5" style="border:2px solid black;height:50px;text-align:center;">header
</tr>
<tr>
<td style="height:25px;width:11%;text-align:center;" class="count">Name</td>
<td colspan="3" style="width:11%;height:100px;text-align:center;">Age</td>
<td style="width:11%;text-align:center;">Gender</td>
</tr>
<tr>
<td rowspan="3" style="height:100px;">
<pre>Name <input type="text" name="Emp name" placeholder="enter your name" id="Name1"/><br>
ID <input type="id" name="Emp Id" placeholder="enter id" id="Name3" > </pre>
</td>
<td></td>
<td></td>
<td></td>
<td rowspan="3">
<pre>
<input type="radio" name="Gender" value="male">MALE</input>
<input type="radio" name="Gender" value="female">FEMALE</input> <br> <input type="radio" name="Gender" value="other">OTHER</input>
</pre>
</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr id="p01">
<td></td>
<td colspan="4" style="height:100px"></td>
</tr>
<tr>
<td colspan="5" style="height:50px;text-align:center;">
footer</td>
</tr>
<tr id="p001">
<td colspan="10" style="border:1px solid #ffffff;height:150px;"><input type="button" value="Get data" onclick="copy('Name');" />
<pre><label for="text"> Name : <input type="text" id="Name2"></label>
<label for="text"> ID : <input type="id" id="Name4"></label> </pre>
</tbody>
</table>
</body>
</head>
</html>
I have a html table where total amount is not getting updated on entering new values and also not getting updated. It only shows NaN.
here is the javascript code:
function totamt(){
var table = document.getElementById("stock");
var total = document.getElementById("total");
var tot = 0;
for(var i=0;i<table.rows.length;i++){
var currentRow = table.rows[i];
tot = tot + parseInt(currentRow.cells[currentRow.cells.length - 1].innerHTML);
}
alert(tot.toString());
document.getElementById('total').innerHTML = tot.toString();
}
$('body').delegate('.remove','click',function(){
$(this).parent().parent().remove();
totalamt();
});
Interactive Snippet
$(function() {
$('#add').click(function() {
addnewrow();
});
$('body').delegate('.remove', 'click', function() {
$(this).parent().parent().remove();
totalamt();
$('.details').delegate('.qty,.price', 'keyup', function() {
var tr = $(this).parent().parent();
var q = tr.find('.qty').val();
var p = tr.find('.price').val();
var a = (q * p);
tr.find('.amt').val(a);
totamt();
});
function totamt() {
var table = document.getElementById("stock");
var total = document.getElementById("total");
var tot = 0;
for (var i = 0; i < table.rows.length; i++) {
var currentRow = table.rows[i];
tot = tot + parseInt(currentRow.cells[currentRow.cells.length - 1].innerHTML);
}
alert(tot.toString());
document.getElementById('total').innerHTML = tot.toString();
}
function addnewrow() {
var n = ($('.details tr').length - 0) + 1;
var tr = '<tr>' +
'<td class="no">' + n + '</td>' +
'<td><input type="text" name="items" id="items" class="form-control items" data-provide="typeahead" autocomplete="off" /></td>' +
'<td><textarea name="size" id="size" class="form-control size" autocomplete="off"></textarea></td>' +
'<td><input type="text" name="qty" id="qty" class="form-control qty" autocomplete="off"/></td>' +
'<td><input type="text" name="unit" id="unit" class="form-control unit" autocomplete="off"/></td>' +
'<td><input type="text" name="price" id="price" class="form-control price" autocomplete="off"/></td>' +
'<td><input type="text" name="tax" id="tax" class="form-control tax" data-provide="typeahead" autocomplete="off" /></td>' +
'<td><input type="text" name="dis" id="dis" class="form-control dis" autocomplete="off" /></td>' +
'<td><input type="text" name="amt" id="amt" class="form-control amt" autocomplete="off" /></td>' +
'<td><button class="btn btn-danger remove">X</button></td>' +
'</tr>';
$('.details').append(tr);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table class="table table-bordered" id="stock">
<thead>
<tr>
<td>Sr no.</td>
<td>Product Name</td>
<td>Qty</td>
<td>Rate</td>
<td>Total</td>
<td><input type="button" name="add" id="add" value="+" class="btn btn-warning" /></td>
</tr>
</thead>
<tbody class="details">
<tr>
<td class="no">1</td>
<td><input type="text" name="items" id="items" class="form-control items" data-provide="typeahead" autocomplete="off" /></td>
<td><input type="text" name="qty" id="qty" class="form-control qty" autocomplete="off" /></td>
<td><input type="text" name="price" id="price" class="form-control price" autocomplete="off" /></td>
<td><input type="text" name="amt" id="amt" class="form-control amt" autocomplete="off" /></td>
<td><button class="btn btn-danger remove">X</button></td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="3" style="text-align:right;">Total</th>
<th colspan="2" id="total" class="total"><b>$</b></th>
</tr>
</tfoot>
</table>
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.