CSS Codes
CSS Layouts
Results 1 to 6 of 6

Thread: problem with dynamic table rows sum

  1. 09-28-2009, 06:32 AM #1
    azegurb
    azegurb is offline New Comer (less than 5 posts)
    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>
    Reply With Quote Reply With Quote
  2. 09-28-2009, 11:28 AM #2
    vwphillips
    vwphillips is offline Elite Coders
    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/
    Reply With Quote Reply With Quote
  3. 09-28-2009, 11:40 AM #3
    azegurb
    azegurb is offline New Comer (less than 5 posts)
    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
    Reply With Quote Reply With Quote
  4. 09-28-2009, 01:55 PM #4
    vwphillips
    vwphillips is offline Elite Coders
    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/
    Reply With Quote Reply With Quote

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

    azegurb (09-28-2009)
  6. 09-28-2009, 02:01 PM #5
    azegurb
    azegurb is offline New Comer (less than 5 posts)
    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
    Reply With Quote Reply With Quote
  7. 10-14-2009, 06:14 AM #6
    didi86
    didi86 is offline New Comer (less than 5 posts)
    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..
    Reply With Quote Reply With Quote
« Previous Thread | Next Thread »

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
  •  

Forum Rules