PDA

View Full Version : problem with dynamic table rows sum



azegurb
09-28-2009, 06:32 AM
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><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>

vwphillips
09-28-2009, 11:28 AM
<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>

azegurb
09-28-2009, 11:40 AM
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

vwphillips
09-28-2009, 01:55 PM
<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>

azegurb
09-28-2009, 02:01 PM
Thanks very thanks
you really nice man
Let God helps you in your works
Amin!
Thank you very much

didi86
10-14-2009, 06:14 AM
<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..