...

View Full Version : Editable table calculations



vadu
11-11-2009, 08:03 AM
Hi,
"I need editable table with calculations in javascript"
"I have a table in that table i have 4 column like
mark1,mark2 and total. if i give input to that specific
cell the total is automatically calculate. Please send any code
or any related links". I tried below code...

<html>
<head>
<title>sample dynamic select list</title>
<script language='javascript'>
function changeContent(tablecell)
{ //alert(tablecell.firstChild.nodeValue);
tablecell.innerHTML = "<INPUT type=text name=newname onBlur=\"javascript:submitNewName(this);\" value=\""+tablecell.innerHTML+"\">";
var u1=document.getElementById('m1').value;
var u2=document.getElementById('m2').value;
res=u1*u2;
document.getElementById('t').innerHTML=res;
tablecell.firstChild.focus();
}
function submitNewName(textfield)
{//alert(textfield.value);
textfield.parentNode.innerHTML= textfield.value;
// textfield.parentNode.innerHTML= res;
}
</script>
</head>
<body>
Double click on any cell. Then enter your own text and then tab out or click on other place.
<table border=1 bgcolor=gray>
<tr>
<th onDblClick="javascript:changeContent(this);">Mark1</th>
<th onDblClick="javascript:changeContent(this);">Mark2</th>
<th onClick="javascript:changeContent(this);">total</th>
</tr>
<tr>
<td onDblClick="javascript:changeContent(this);" id="m1">10</td>
<td onDblClick="javascript:changeContent(this);" id="m2">20</td>
<td onClick="javascript:changeContent(this);" id="t"></td>
</tr>
</table>
</body>
</html>

I got it editable table but i cannot able to add two cell and also assign result to total.. let u know please help me

Thanks

vwphillips
11-11-2009, 11:57 AM
<html>
<head>
<title>sample dynamic select list</title>

<script type="text/javascript">
/*<![CDATA[*/
function Cal(ip){
while (ip.parentNode&&ip.nodeName.toUpperCase()!='TR'){
ip=ip.parentNode;
}
var ips=ip.getElementsByTagName('INPUT');
ip.getElementsByTagName('TD')[2].innerHTML=ips[0].value*ips[1].value;
}
/*]]>*/
</script></head>
<body>
enter your own text and then tab out or click on other place.
<table border=1 bgcolor=gray>
<tr>
<th >Mark1</th>
<th >Mark2</th>
<th >total</th>
</tr>
<tr>
<td ><input name="" size="2" value="10" onblur="Cal(this);" style="background-Color:gray;border-Width:0px;font-Size:15px;"/></td>
<td ><input name="" size="2" value="20" onblur="Cal(this);" style="background-Color:gray;border-Width:0px;font-Size:15px;"/></td>
<td >30</td>
</tr>
</table>
</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum