Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Nov 2009
    Location
    chennai
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Editable table calculations

    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
    Last edited by vadu; 11-11-2009 at 09:11 AM.

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,534
    Thanks
    3
    Thanked 513 Times in 500 Posts
    Code:
    <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>
    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/


  •  

    Posting Permissions

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