www.webdeveloper.com
Results 1 to 3 of 3

Thread: Need to Create Table with calculation logic using JavaScript Only

Hybrid View

  1. #1
    Join Date
    Jan 2014
    Posts
    1

    Question Need to Create Table with calculation logic using JavaScript Only

    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 !

    http://www.coderanch.com/t/627076/a/...een%20shot.jpg

  2. #2
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,373

    Lightbulb

    The following code is NOT COMPLETE. Still working on the calculations section.
    But it's getting late here and I need to go to work early.
    Perhaps some other forum members will take on this until I can return.

    See what you can do with this as a start. It will need more CSS formatting to make it appear with font-size and colors.

    Code:
    <!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>

  3. #3
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,373

    Lightbulb

    More hard-coding in this that I would like, but I'll let you make it into a more general-purpose solution...

    Code:
    <!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>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles