Results 1 to 6 of 6

Thread: problem with dynamic table rows sum

  1. #1
    Join Date
    Sep 2009
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default problem with dynamic table rows sum

    I have created dynamic table with two columns
    for ex:first column is Income column
    and second column is tax from Income
    at the third column are different percent options
    for ex. I wrote first column 1000 and chose from third drop down box 10%
    I would like when i chose 10% sum function automatically writes 10% percent of 1000 into second column so that 100
    here is code if possible pls help me i really need this code and i bellieve that this code is useful both me and other users
    thanks beforehand


    HTML Code:
    <html><head><title>dinamik sheet</title>
    
    <script> 
    function addrow(){
    
    var tbl=document.getElementById('sheet');
    var lastrow=tbl.rows.length;
    var iteration=lastrow;
    var row=tbl.insertRow(lastrow);
    var cellLeft=row.insertCell(0);
    var textNode=document.createTextNode(iteration);
    cellLeft.appendChild(textNode);
    var cellRight=row.insertCell(1);
    var el=document.createElement('input');
    el.type='text';
    el.name='txtRow'+iteration;
    el.size=40;
    el.setAttribute('sumMe',"1");
    el.onBlur=sum;
    
    
    cellRight.appendChild(el);
    
    var cellRight2=row.insertCell(2);
    var el1=document.createElement('input');
    el1.type='text';
    el1.name='txtRowe'+iteration;
    el1.id='txtRowe'+iteration;
    el1.size=40;
    el1.setAttribute('sumMe',"1");
    
    cellRight2.appendChild(el1);
    
    
    
    
    
    var cellRightsel=row.insertCell(3);
    var sel=document.createElement('select');
    sel.name='selRow'+iteration;
    sel.options[0]=new Option('10%','value="10"');
    sel.options[1]=new Option('20%','value="20"');
    sel.options[2]=new Option('30%','value="30"');
    cellRightsel.appendChild(sel);
    var cellRightsel2=row.insertCell(4);
    
    }
    </script>
    <script> 
    function sum(){    
    var form=document.getElementById('eval_edit');
        if(!form) return;
        var s1 = 0;
        var s2 = 0;
        var tbl=document.getElementById('sheet');
        var iteration=tbl.rows.length-1;
        for(var i=1; i<=iteration; i++){
            var el = form['txtRow'+i];
            if(!el) continue;
            var txt = el.value;
            if(txt != ( '' + Number(txt) )) continue;//reject non-numeric entries
            var el2 = form['selRow'+i];
            var el3 = document.getElementById('txtRowe'+i);
            if(!el2 || !el3) alert('Error in calculating totals');
            var percent = Number(el2[el2.selectedIndex].value)/100;
            var tax = Number(txt) * percent;
            el3.innerHTML = tax.toFixed(2);
    
            s1 += Number(txt);
            s2 += tax;
        }
        if(form['total']){ form['total'].value = s1.toFixed(2); }
        if(form['taxtotal']){ form['taxtotal'].value = s2.toFixed(2); }
    }
    
    
    onload = function(){
    sum();
    }
    
    </script>
    </head>
    <body>
    <form name="eval_edit" method="POST">
    <table align="center" width="75%">
    <tr>
    <td align="center">Balance sheet</td></tr>
    <tr><td align="center">
    <table border="1" id="sheet"><tr><td>object</td><td>Income</td><td>Tax from income</td><td>instruktor</td></tr>
    <tr><td>1</td>
    <td><input sumMe="1" type="text" name="txtrow1" id="txtrow1" size="40"/></td><td><input sumMe="1" type="text" name="txtrowe" id="txtrowe" size="40"/></td>
    <td><select name="selRow0">
    <option value="value="10">10%</option>
    <option value="value="20">20%</option>
    <option value="value="30">30%</option></select></td></tr></table>
    INCOME SUM<input name="total" type="text"/>
    <input type="button" value="Add" onclick="addrow()" /> 
    <input type="button" value="Remove" onclick="removeRow()" /> 
    <input type="button" value="SUM" onClick="sum()"/> 
    <input type="submit" value="Submit" /> <input name="taxtotal" type="text"/>Tax SUM with desirable percent for ex: 20%
    </td> 
    </tr> 
    </table> 
    </form> 
    
    </body> 
    
    </html>

  2. #2
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,891
    Thanks
    2
    Thanked 441 Times in 435 Posts

    Default

    Code:
    <html><head><title>dinamik sheet</title>
    
    <script>
    function addrow(){
    
    var tbl=document.getElementById('sheet');
    var lastrow=tbl.rows.length;
    var iteration=lastrow;
    var row=tbl.insertRow(lastrow);
    var cellLeft=row.insertCell(0);
    var textNode=document.createTextNode(iteration);
    cellLeft.appendChild(textNode);
    var cellRight=row.insertCell(1);
    var el=document.createElement('input');
    el.type='text';
    el.name='txtRow'+iteration;
    el.size=40;
    el.setAttribute('sumMe',"1");
    el.onBlur=sum;
    
    
    cellRight.appendChild(el);
    
    var cellRight2=row.insertCell(2);
    var el1=document.createElement('input');
    el1.type='text';
    el1.name='txtRowe'+iteration;
    el1.id='txtRowe'+iteration;
    el1.size=40;
    el1.setAttribute('sumMe',"1");
    
    cellRight2.appendChild(el1);
    
    
    
    
    
    var cellRightsel=row.insertCell(3);
    var sel=document.createElement('select');
    sel.name='selRow'+iteration;
    sel.options[0]=new Option('10%','10');
    sel.options[1]=new Option('20%','20');
    sel.options[2]=new Option('30%','30');
    sel.onchange=function(){ Percent(this); }
    cellRightsel.appendChild(sel);
    var cellRightsel2=row.insertCell(4);
    
    }
    </script>
    <script>
    function sum(){
    var form=document.getElementById('eval_edit');
        if(!form) return;
        var s1 = 0;
        var s2 = 0;
        var tbl=document.getElementById('sheet');
        var iteration=tbl.rows.length-1;
        for(var i=1; i<=iteration; i++){
            var el = form['txtRow'+i];
            if(!el) continue;
            var txt = el.value;
            if(txt != ( '' + Number(txt) )) continue;//reject non-numeric entries
            var el2 = form['selRow'+i];
            var el3 = document.getElementById('txtRowe'+i);
            if(!el2 || !el3) alert('Error in calculating totals');
            var percent = Number(el2[el2.selectedIndex].value)/100;
            var tax = Number(txt) * percent;
            el3.innerHTML = tax.toFixed(2);
            s1 += Number(txt);
            s2 += tax;
        }
        if(form['total']){ form['total'].value = s1.toFixed(2); }
        if(form['taxtotal']){ form['taxtotal'].value = s2.toFixed(2); }
    }
    
    
    onload = function(){
    sum();
    }
    
    </script>
    <script  type="text/javascript">
    /*<![CDATA[*/
    
    function Percent(obj){
     var row=obj;
     while (row.parentNode&&row.nodeName!='TR'){
      row=row.parentNode;
     }
     var ips=row.getElementsByTagName('INPUT')
     ips[0].value=ips[0].value.replace(/[^0-9.]/g,'');
     ips[1].value='';
     if (ips[0].value){
      ips[1].value=(ips[0].value/100*obj.value).toFixed(2);
     }
    }
    
    /*]]>*/
    </script></head>
    <body>
    <form name="eval_edit" method="POST">
    <table align="center" width="75%">
    <tr>
    <td align="center">Balance sheet</td></tr>
    <tr><td align="center">
    <table border="1" id="sheet"><tr><td>object</td><td>Income</td><td>Tax from income</td><td>instruktor</td></tr>
    <tr><td>1</td>
    <td><input sumMe="1" type="text" name="txtrow1" id="txtrow1" size="40"/></td><td><input sumMe="1" type="text" name="txtrowe" id="txtrowe" size="40"/></td>
    <td><select name="selRow0" onchange="Percent(this); ">
    <option value="10">10%</option>
    <option value="20">20%</option>
    <option value="30">30%</option></select></td></tr></table>
    INCOME SUM<input name="total" type="text"/>
    <input type="button" value="Add" onclick="addrow()" />
    <input type="button" value="Remove" onclick="removeRow()" />
    <input type="button" value="SUM" onClick="sum()"/>
    <input type="submit" value="Submit" /> <input name="taxtotal" type="text"/>Tax SUM with desirable percent for ex: 20%
    </td>
    </tr>
    </table>
    </form>
    
    </body>
    
    </html>
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  3. #3
    Join Date
    Sep 2009
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default it cannot sum both sum and sum of tax

    Thanks thanks very much
    you really helps me great
    i Just tried but it cannot sum to the total and taxtotal values
    if possible can you look up this
    thanks very much for your attention

  4. #4
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,891
    Thanks
    2
    Thanked 441 Times in 435 Posts

    Default

    Code:
    <html><head><title>dinamik sheet</title>
    
    <script>
    function addrow(){
    
    var tbl=document.getElementById('sheet');
    var lastrow=tbl.rows.length;
    var iteration=lastrow;
    var row=tbl.insertRow(lastrow);
    var cellLeft=row.insertCell(0);
    var textNode=document.createTextNode(iteration);
    cellLeft.appendChild(textNode);
    var cellRight=row.insertCell(1);
    var el=document.createElement('input');
    el.type='text';
    el.name='txtRow'+iteration;
    el.size=40;
    el.setAttribute('sumMe',"1");
    el.onBlur=sum;
    
    
    cellRight.appendChild(el);
    
    var cellRight2=row.insertCell(2);
    var el1=document.createElement('input');
    el1.type='text';
    el1.name='txtRowe'+iteration;
    el1.id='txtRowe'+iteration;
    el1.size=40;
    el1.setAttribute('sumMe',"1");
    
    cellRight2.appendChild(el1);
    
    
    
    
    
    var cellRightsel=row.insertCell(3);
    var sel=document.createElement('select');
    sel.name='selRow'+iteration;
    sel.options[0]=new Option('10%','10');
    sel.options[1]=new Option('20%','20');
    sel.options[2]=new Option('30%','30');
    sel.onchange=function(){ Percent(this); }
    cellRightsel.appendChild(sel);
    var cellRightsel2=row.insertCell(4);
    
    }
    </script>
    <script>
    
    function sum(){
     var form=document.getElementById('eval_edit');
     var rows=document.getElementById('sheet').rows;
     for (var s=[0,0],z0=0;z0<rows.length;z0++){
      var ips=rows[z0].getElementsByTagName('INPUT');
      for (var z0a=0;z0a<ips.length;z0a++){
       ips[z0a].value=ips[z0a].value.replace(/[^0-9.]/g,'');
       if (ips[z0a].value){
        s[z0a]+=ips[z0a].value*1
       }
      }
     }
     if(form['total']){
      form['total'].value = s[0].toFixed(2);
     }
     if(form['taxtotal']){
      form['taxtotal'].value = s[1].toFixed(2);
     }
    }
    
    
    onload = function(){
    sum();
    }
    
    </script>
    <script  type="text/javascript">
    /*<![CDATA[*/
    
    function Percent(obj){
     var row=obj;
     while (row.parentNode&&row.nodeName!='TR'){
      row=row.parentNode;
     }
     var ips=row.getElementsByTagName('INPUT')
     ips[0].value=ips[0].value.replace(/[^0-9.]/g,'');
     ips[1].value='';
     if (ips[0].value){
      ips[1].value=(ips[0].value/100*obj.value).toFixed(2);
     }
    }
    
    /*]]>*/
    </script></head>
    <body>
    <form name="eval_edit" method="POST">
    <table align="center" width="75%">
    <tr>
    <td align="center">Balance sheet</td></tr>
    <tr>
    <td align="center">
    <table border="1" id="sheet"><tr><td>object</td><td>Income</td><td>Tax from income</td><td>instruktor</td></tr>
    <tr>
    <td>1</td>
    <td><input sumMe="1" type="text" name="txtrow1" id="txtrow1" size="40"/></td><td><input sumMe="1" type="text" name="txtrowe" id="txtrowe" size="40"/></td>
    <td><select name="selRow0" onchange="Percent(this); ">
    <option value="10">10%</option>
    <option value="20">20%</option>
    <option value="30">30%</option></select></td></tr></table>
    INCOME SUM<input name="total" type="text"/>
    <input type="button" value="Add" onclick="addrow()" />
    <input type="button" value="Remove" onclick="removeRow()" />
    <input type="button" value="SUM" onClick="sum()"/>
    <input type="submit" value="Submit" /> <input name="taxtotal" type="text"/>Tax SUM with desirable percent for ex: 20%
    </td>
    </tr>
    </table>
    </form>
    
    </body>
    
    </html>
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  5. The Following User Says Thank You to vwphillips For This Useful Post:

    azegurb (09-28-2009)

  6. #5
    Join Date
    Sep 2009
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Thanks very thanks
    you really nice man
    Let God helps you in your works
    Amin!
    Thank you very much

  7. #6
    Join Date
    Oct 2009
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Plz..need help..:(

    <script language="javascript">
    function addRowToTable()
    {
    var tbl = document.getElementById('tblSample');
    var lastRow = tbl.rows.length;
    // if there's no header row in the table, then iteration = lastRow + 1
    var iteration = lastRow;
    var row = tbl.insertRow(lastRow);

    // left cell
    var cellLeft = row.insertCell(0);
    var textNode = document.createTextNode(iteration);
    cellLeft.appendChild(textNode);

    // right cell
    var cellRight = row.insertCell(1);
    var el = document.createElement('input');
    el.type = 'text';
    el.name = 'txtRow' + iteration;
    el.id = 'txtRow' + iteration;
    el.size = 40;

    el.onkeypress = keyPressTest;
    cellRight.appendChild(el);

    // select cell
    var cellRightSel = row.insertCell(2);
    var sel = document.createElement('select');
    sel.name = 'selRow' + iteration;
    sel.options[0] = new Option('text zero', 'value0');
    sel.options[1] = new Option('text one', 'value1');
    cellRightSel.appendChild(sel);

    }


    function keyPressTest(e, obj)
    {
    var validateChkb = document.getElementById('chkValidateOnKeyPress');
    if (validateChkb.checked) {
    var displayObj = document.getElementById('spanOutput');
    var key;
    if(window.event) {
    key = window.event.keyCode;
    }
    else if(e.which) {
    key = e.which;
    }
    var objId;
    if (obj != null) {
    objId = obj.id;
    } else {
    objId = this.id;
    }
    displayObj.innerHTML = objId + ' : ' + String.fromCharCode(key);
    }
    }



    function removeRowFromTable()
    {
    var tbl = document.getElementById('tblSample');
    var lastRow = tbl.rows.length;
    if (lastRow > 2) tbl.deleteRow(lastRow - 1);
    }



    function openInNewWindow(frm)
    {
    // open a blank window
    var aWindow = window.open('', 'TableAddRowNewWindow',
    'scrollbars=yes,menubar=yes,resizable=yes,toolbar=no,width=400,height=400');

    // set the target to the blank window
    frm.target = 'TableAddRowNewWindow';

    // submit
    frm.submit();
    }



    function validateRow(frm)
    {
    var chkb = document.getElementById('chkValidate');
    if (chkb.checked) {
    var tbl = document.getElementById('tblSample');
    var lastRow = tbl.rows.length - 1;
    var i;
    for (i=1; i<=lastRow; i++) {
    var aRow = document.getElementById('txtRow' + i);
    if (aRow.value.length <= 0) {
    alert('Row ' + i + ' is empty');
    return;
    }
    }
    }
    openInNewWindow(frm);
    }
    </script>

    <form action="tableaddrow_nw.html" method="get">
    <p>
    <input type="button" value="Add" onclick="addRowToTable();" />
    <input type="button" value="Remove" onclick="removeRowFromTable();" />
    <input type="button" value="Submit" onclick="validateRow(this.form);" />
    <input type="checkbox" id="chkValidate" /> Validate Submit
    </p>
    <p>
    <input type="checkbox" id="chkValidateOnKeyPress" checked="checked" /> Display OnKeyPress
    <span id="spanOutput" style="border: 1px solid #000; padding: 3px;"> </span>
    </p>
    <table border="1" id="referfriends">
    <table border="1" id="tblSample">
    <tr>
    <tr>
    <td> 1.</td>
    <td size = "30">Salutation</td>
    <td>:</td>
    <td>
    <select name="selRow0">
    <option value="value0">Mr</option>
    <option value="value1">Ms</option>
    <option value="value1">Madam</option>
    </select>
    </td>
    </tr>

    <tr>
    <td> </td>
    <td size = "30">Friend's Name</td>
    <td>:</td>
    <td><input type="text" name="txtRow1" id="txtRow1" size="20" onkeypress="keyPressTest(event, this);" /></td>
    </tr>

    <tr>
    <td> </td>
    <td size = "30">Friend's Email</td>
    <td>:</td>
    <td><input type="text" name="txtRow1" id="txtRow1" size="20" onkeypress="keyPressTest(event, this);" /></td>
    </tr>

    <tr>
    <td> </td>
    <td size = "30">Friend's Phone Number</td>
    <td>:</td>
    <td><input type="text" name="txtRow1" id="txtRow1" size="20" onkeypress="keyPressTest(event, this);" /></td>
    </tr>
    </tr>
    </table>
    </table>
    </form>


    pls help me..i would like to add more rows in a time..but cannot work..huhu..plz..

Bookmarks

Posting Permissions

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