Menu
i tried to make a table column using JavaScript with calculation logic. i need to integrate with .js file only. if i entered value in quantity column that should be calculate with MRC and NRC and need to show it up on the corresponding total column. finally want overall total in below.
Guide me how can i create in JavaScript file ?
Greetings !
[URL=”http://www.coderanch.com/t/627076/a/5049/Screen%20shot.jpg”]http://www.coderanch.com/t/627076/a/5049/Screen%20shot.jpg
<i>
</i><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title> Untitled </title>
<style type="text/css">
td { text-align:right; }
</style>
<script type="text/javascript">
// Orig.from: http://www.w3schools.com/htmldom/met_table_insertrow.asp
// Help from: http://www.webdeveloper.com/forum/showthread.php?p=917975#post917975
// Modified for: http://www.webdeveloper.com/forum/showthread.php?289033-Need-to-Create-Table-with-calculation-logic-using-JavaScript-Only
function tblSize(TBL) { // number of rows in the table:
return document.getElementById(TBL).rows.length;
}
function insRow(TBL,RowPosition,RowContents) { // insert row at specific position
var numRows = tblSize(TBL);
if (numRows < RowPosition) { RowPosition = numRows; } // check for valid insertion
var x=document.getElementById(TBL).insertRow(RowPosition);
var tmp = RowContents.split(',');
for (var i=0; i<tmp.length; i++) {
var y=x.insertCell(i);
y.innerHTML = tmp[i];
y.id = 'RC_'+RowPosition+'_'+i;
}
}
function delRow(TBL,RowPosition) { // delete specific row from table
var numRows = tblSize(TBL);
if (RowPosition < numRows) { // check for valid deletion
document.getElementById(TBL).deleteRow(RowPosition);
}
}
function addRow(TBL,RowContents) { // append row to end of table
var idxLastRow = tblSize(TBL);
insRow(TBL,idxLastRow,RowContents);
}
/* NOT CURRENTLY USED IN THIS PROGRAM
function delLastRow(TBL) { / delete last row of table
var numRows = tblSize(TBL);
delRow(TBL,numRows-1);
}
function delAllRows(TBL) {
// delete all rows in the table (continuously delete first row until all rows gone):
var objTable = document.getElementById(TBL);
while (objTable.rows.length > 0) { objTable.deleteRow(0); }
}
*/
</script>
</head>
<body>
<table id="MainTable" border="1">
</table>
<script type="text/javascript">
var Arena = [
'Seat Type,Quantity,MRC,NRC,Ext. MRC, Ext. NRC',
'Basic Seats,<input type="text" value="0" size="3">,17.00,59.00,0.00,0.00',
'Conference Room Seats,<input type="text" value="0" size="3">,22.00,59.00,0.00,0.00',
'Standard Seats,<input type="text" value="0" size="3">,22.00,59.00,0.00,0.00',
'Premium Seats,<input type="text" value="0" size="3">,25.00,59.00,0.00,0.00',
'Receptionist Seats,<input type="text" value="0" size="3">,25.00,59.00,0.00,0.00',
'Add-ons,Quantity,MRC,NRC,Ext. MRC, Ext. NRC',
'Hunt Group,<input type="text" value="0" size="3">,1,4.95,0.00,0.00',
'Auto Attendant,<input type="text" value="0" size="3">,10.00,14.95,0.00,0.00',
'Anywhere Numbers(s),<input type="text" value="0" size="3">,10.00,21.95,0.00,0.00',
'Softphone,<input type="text" value="0" size="3">,1.00,49.95,0.00,0.00',
'Receptionis Sowfware Console,<input type="text" value="0" size="3">,1.00,49,0.00,0.00',
'Voice Main (TUI Only),<input type="text" value="0" size="3">,1.00,5.95,0.00,0.00',
'Available TNs,<input type="text" value="0" size="3">,1.00,4.95,0.00,0.00',
'TOTAL,,,,0,0'
];
window.onload = function() {
for (var i=0; i<Arena.length; i++) {
addRow('MainTable',Arena[i]);
}
/* */
var sel = document.getElementById('MainTable').getElementsByTagName('input');
for (var i=0; i<sel.length; i++) {
sel[i].id = 'V_'+i;
sel[i].onchange = function() { calculate(this.id); }
}
sel = document.getElementById('MainTable').getElementsByTagName('td');
for (var i=0; i<sel.length; i++) {
if (sel[i].innerHTML.indexOf('input') == -1) { sel[i].onclick = function() { alert(this.id+' : '+this.innerHTML); } }
}
/* */
}
function calculate(IDS) {
var str = IDS+' : ';
str += document.getElementById(IDS).value;
alert(str);
}
</script>
</body>
</html>
<i>
</i><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title> Untitled </title>
<style type="text/css">
td { text-align:right; }
</style>
<script type="text/javascript">
// Orig.from: http://www.w3schools.com/htmldom/met_table_insertrow.asp
// Help from: http://www.webdeveloper.com/forum/showthread.php?p=917975#post917975
// Modified for: http://www.webdeveloper.com/forum/showthread.php?289033-Need-to-Create-Table-with-calculation-logic-using-JavaScript-Only
function tblSize(TBL) { // number of rows in the table:
return document.getElementById(TBL).rows.length;
}
function insRow(TBL,RowPosition,RowContents) { // insert row at specific position
var numRows = tblSize(TBL);
if (numRows < RowPosition) { RowPosition = numRows; } // check for valid insertion
var x=document.getElementById(TBL).insertRow(RowPosition);
var tmp = RowContents.split(',');
for (var i=0; i<tmp.length; i++) {
var y=x.insertCell(i);
y.innerHTML = tmp[i];
}
}
function delRow(TBL,RowPosition) { // delete specific row from table
var numRows = tblSize(TBL);
if (RowPosition < numRows) { // check for valid deletion
document.getElementById(TBL).deleteRow(RowPosition);
}
}
function addRow(TBL,RowContents) { // append row to end of table
var idxLastRow = tblSize(TBL);
insRow(TBL,idxLastRow,RowContents);
}
/* FOLLOWING IS NOT CURRENTLY USED IN THIS PROGRAM
function delLastRow(TBL) { / delete last row of table
var numRows = tblSize(TBL);
delRow(TBL,numRows-1);
}
function delAllRows(TBL) {
// delete all rows in the table (continuously delete first row until all rows gone):
var objTable = document.getElementById(TBL);
while (objTable.rows.length > 0) { objTable.deleteRow(0); }
}
*/
</script>
</head>
<body>
<table id="MainTable" border="1"></table>
<!-- for testing purposes only
<p><button onclick="document.getElementById('debug').innerHTML = ''">Clear</button>
<div id="debug"></div>
-->
<script type="text/javascript">
var Arena = [
'Seat Type,Quantity,MRC,NRC,Ext. MRC, Ext. NRC',
'Basic Seats,<input type="text" value="0" size="5">,17.00,59.00,0.00,0.00',
'Conference Room Seats,<input type="text" value="0" size="5">,22.00,59.00,0.00,0.00',
'Standard Seats,<input type="text" value="0" size="5">,22.00,59.00,0.00,0.00',
'Premium Seats,<input type="text" value="0" size="5">,25.00,59.00,0.00,0.00',
'Receptionist Seats,<input type="text" value="0" size="5">,25.00,59.00,0.00,0.00',
'Add-ons,Quantity,MRC,NRC,Ext. MRC, Ext. NRC',
'Hunt Group,<input type="text" value="0" size="5">,1,4.95,0.00,0.00',
'Auto Attendant,<input type="text" value="0" size="5">,10.00,14.95,0.00,0.00',
'Anywhere Numbers(s),<input type="text" value="0" size="5">,10.00,21.95,0.00,0.00',
'Softphone,<input type="text" value="0" size="5">,1.00,49.95,0.00,0.00',
'Receptionis Sowfware Console,<input type="text" value="0" size="5">,1.00,49,0.00,0.00',
'Voice Main (TUI Only),<input type="text" value="0" size="5">,1.00,5.95,0.00,0.00',
'Available TNs,<input type="text" value="0" size="5">,1.00,4.95,0.00,0.00',
'TOTAL,,,,0,0'
];
var tblCols = 6; // global value for hard coded table
function idN(ids) { return ids.replace(/D+/,''); }
function tblRow(ids) { return parseInt(idN(ids) / tblCols); }
function tblCol(ids) { return idN(ids) % tblCols; }
window.onload = function() {
for (var i=0; i<Arena.length; i++) { addRow('MainTable',Arena[i]); }
sel = document.getElementById('MainTable').getElementsByTagName('td');
for (var i=0; i<sel.length; i++) {
sel[i].id = 'tblRC'+i;
/* following only used for testing purposes
if (sel[i].innerHTML.indexOf('input') == -1) {
sel[i].onclick
= function() { document.getElementById('debug').innerHTML += '<br>'+idN(this.id)+' : '+this.innerHTML; }
}
*/
}
var sel = document.getElementById('MainTable').getElementsByTagName('input');
for (var i=0; i<sel.length; i++) {
sel[i].id = 'V_'+i;
sel[i].onchange = function() { calculate(this.id,this.parentNode.id); }
}
}
function calculate(IDS,parentID) {
var tarr = [];
var rc = idN(parentID); // rc
tarr.push('tblRC'+(rc*1+1)); // rc+1
tarr.push('tblRC'+(rc*1+2)); // rc+2
tarr.push('tblRC'+(rc*1+3)); // rc+3
tarr.push('tblRC'+(rc*1+4)); // rc+4
// for testing purposes
// var str = IDS+'='+document.getElementById(IDS).value+' parentID:'+parentID +tarr.join(',');
// document.getElementById('debug').innerHTML += '<br>'+str;
var Q = parseInt(document.getElementById(IDS).value);
document.getElementById(tarr[2]).innerHTML = (parseFloat(document.getElementById(tarr[0]).innerHTML) * Q).toFixed(2);
document.getElementById(tarr[3]).innerHTML = (parseFloat(document.getElementById(tarr[1]).innerHTML) * Q).toFixed(2);
var sumMRC = 0; var sumNRC = 0; var tmp;
for (var i=0; i<Arena.length*tblCols-tblCols; i=i+tblCols) {
tmp = document.getElementById('tblRC'+(i+4)).innerHTML;
if ( ! isNaN(tmp)) { sumMRC += parseFloat(tmp); }
tmp = document.getElementById('tblRC'+(i+5)).innerHTML;
if ( ! isNaN(tmp)) { sumNRC += parseFloat(tmp); }
}
tmp = (Arena.length*tblCols-tblCols)+4; // document.getElementById('debug').innerHTML += ' tblRC'+tmp;
document.getElementById('tblRC'+tmp).innerHTML = sumMRC.toFixed(2);
tmp = (Arena.length*tblCols-tblCols)+5; // document.getElementById('debug').innerHTML += ' tblRC'+tmp+'<br>';
document.getElementById('tblRC'+tmp).innerHTML = sumNRC.toFixed(2);
}
</script>
</body>
</html>
0.1.9 — BETA 6.18