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
    Apr 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    How to provide the same functionality to an element in innerHTML as it is present in

    Hi All,
    I have an HTML page having a table and many columns.In that page i have to add new rows and cells dynamically.Adding new rows is working fine using inner HTML.
    But for particular textboxes i have two buttons namely "edit" and "save".the edit button will make the textbox editable and "save" button will make the textboxes in that row uneditable.
    Now my question is that as i am adding new rows using innerHTML how to add this functionality (making the textbox editable and uneditable) to the buttons that are dynamically created.

    Code lokks like this:

    Code:
    <html> 
    <head> 
    <title>E 1.3</title> 
    <script type="text/javascript"> 
    function insRow(idval) 
    { 
    var x=document.getElementById(idval).insertRow(1); 
    var a=x.insertCell(0); 
    var b=x.insertCell(1); 
    var c=x.insertCell(2); 
    var d=x.insertCell(3); 
    a.innerHTML="<input type='text' >"; 
    b.innerHTML="<input type='text' >"; 
    c.innerHTML="<input type='submit' value='edit' onClick='disable1(false)'; >"; 
    d.innerHTML="<input type='submit' value='save' onClick='disable(true)'; >"; 
    } 
    function delRow(idval) 
    { 
    var x=document.getElementById(idval).deleteRow(1); 
    var a=x.deleteCell(0); 
    var b=x.deleteCell(1); 
    var c=x.deleteCell(2); 
    var d=x.deleteCell(3); 
    var e=x.deleteCell(4); 
    }
    function disable(onoff)
    {
    	txtbox1.disabled=onoff;	
    	txtbox2.disabled=onoff;
    } 
    function disable1(onoff)
    {
    	txtbox3.disabled=onoff;	
    	txtbox4.disabled=onoff;
    }
    </script> 
    </head> 
    <body ALINK="#FF0000" LINK="#0000FF" VLINK="#FF33FF" bgcolor="#FFFFCC"> 
    <table border="0.5" bgcolor="#CCFFCC" cellpadding="2" cellspacing="5"> 
    <tr> 
    <td> 
    <table id="myTable1" border="0.5" bgcolor="#CCFFCC" cellpadding="2" cellspacing="5"> 
    <tr> 
    <td >Australia</td> 
    <td><input type="text" name='txtbox1' disabled=true value="376080039931009" /></td> 
    <td><input type="text" name='txtbox2' disabled=true value="rptau4793" /></td> 
    <td><a HREF="" target="new">Summary of Accounts</a></td> 
    <td><a HREF="" target="new">Estatement</a></td> 
    <td><input type="submit" value="edit" onClick=disable(false);></td> 
    <td><input type="submit" value="save" onClick=disable(true);></td> 
    </tr> 
    </table> 
    <table border="0.5" bgcolor="#CCFFCC" cellpadding="2" cellspacing="5"> 
    <tr> 
    <td><input type="button" onclick="insRow('myTable1')" value="Insert row"></td> 
    <td><input type="button" onclick="delRow('myTable1')" value="delete row"></td> 
    </tr> 
    </table> 
    </td> 
    <tr> 
    <td> 
    <table id="myTable2" border="0.5" bgcolor="#CCFFCC" cellpadding="2" cellspacing="5"> 
    <tr> 
    <td >Australia</td> 
    <td><input type="text" name='txtbox3' disabled=true value="376080039931009" /></td> 
    <td><input type="text" name='txtbox4' disabled=true value="rptau4793" /></td> 
    <td><a HREF="" target="new">Summary of Accounts</a></td> 
    <td><a HREF="" target="new">Estatement</a></td> 
    <td><input type="submit" value="edit" onClick=disable1(false);></td> 
    <td><input type="submit" value="save" onClick=disable1(true);></td> 
    </tr> 
    </table> 
    <table border="0.5" bgcolor="#CCFFCC" cellpadding="2" cellspacing="5"> 
    <tr> 
    <td><input type="button" onclick="insRow('myTable2')" value="Insert row"></td> 
    <td><input type="button" onclick="delRow('myTable2')" value="delete row"></td> 
    </tr> 
    </table> 
    </td> 
    </table> 
    </body> 
    </html>



    The part that is having problem ios :

    Code:
    function insRow(idval) 
    { 
    var x=document.getElementById(idval).insertRow(1); 
    var a=x.insertCell(0); 
    var b=x.insertCell(1); 
    var c=x.insertCell(2); 
    var d=x.insertCell(3); 
    a.innerHTML="<input type='text' >"; 
    b.innerHTML="<input type='text' >"; 
    c.innerHTML="<input type='submit' value='edit' onClick='disable1(false)'; >"; 
    d.innerHTML="<input type='submit' value='save' onClick='disable(true)'; >"; 
    }

    If it is not possible with innerHTML to dynamically add new rows and assign functionality is it possible with any new javascript functionality.Please advice.

    Thanks in advance

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,536
    Thanks
    3
    Thanked 513 Times in 500 Posts
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <script type="text/javascript">
    /*<![CDATA[*/
    
    function disable(ud){
     var evt=window.event||arguments.callee.caller.arguments[0];
     var obj=window.event?evt.srcElement:evt.target;
     if(obj.nodeType==3) obj=obj.parentNode; // defeat Safari bug
     var tr=obj;
     while (tr.parentNode&&tr.nodeName!='TR') tr=tr.parentNode;
     ips=tr.getElementsByTagName('INPUT');
     for (var z0=0;z0<2;z0++){
      if (!ud) ips[z0].removeAttribute('disabled');
      else ips[z0].setAttribute('disabled','disabled');
     }
    }
    
    function insRow(id){
     var table=document.getElementById(id);
     clone=table.getElementsByTagName('TR')[0].cloneNode(true);
     table.getElementsByTagName('TBODY')[0].appendChild(clone);
     ips=clone.getElementsByTagName('INPUT');
     for (var z0=0;z0<2;z0++){
      ips[z0].setAttribute('disabled','disabled');
     }
    }
    
    function delRow(id){
     var table=document.getElementById(id);
     var rows=table.rows;
     if (table.rows.length>1){
      rows[0].parentNode.removeChild(rows[rows.length-1]);
     }
    }
    /*]]>*/
    </script></head>
    
    <body>
    suggest you use brackets notation for input names to facilitate submission of new rows inputs
    <table border="0.5" bgcolor="#CCFFCC" cellpadding="2" cellspacing="5">
    <tr>
    <td>
    
    <table id="myTable1" border="0.5" bgcolor="#CCFFCC" cellpadding="2" cellspacing="5">
    <tbody>
    <tr>
    <td >Australia</td>
    <td><input type="text" name='txtbox1[]' disabled=true value="376080039931009" /></td>
    <td><input type="text" name='txtbox2[]' disabled=true value="rptau4793" /></td>
    <td><a HREF="" target="new">Summary of Accounts</a></td>
    <td><a HREF="" target="new">Estatement</a></td>
    <td><input type="submit" value="edit" onClick=disable(false);></td>
    <td><input type="submit" value="save" onClick=disable(true);></td>
    </tr>
    </tbody>
    </table>
    
    <table border="0.5" bgcolor="#CCFFCC" cellpadding="2" cellspacing="5">
    <tr>
    <td><input type="button" onclick="insRow('myTable1')" value="Insert row"></td>
    <td><input type="button" onclick="delRow('myTable1')" value="delete row"></td>
    </tr>
    </table>
    
    </td>
    <tr>
    <td>
    
    <table id="myTable2" border="0.5" bgcolor="#CCFFCC" cellpadding="2" cellspacing="5">
    <tbody>
    <tr>
    <td >Australia</td>
    <td><input type="text" name='txtbox3[]' disabled=true value="376080039931009" /></td>
    <td><input type="text" name='txtbox4[]' disabled=true value="rptau4793" /></td>
    <td><a HREF="" target="new">Summary of Accounts</a></td>
    <td><a HREF="" target="new">Estatement</a></td>
    <td><input type="submit" value="edit" onClick=disable(false);></td>
    <td><input type="submit" value="save" onClick=disable(true);></td>
    </tr>
    </tbody>
    </table>
    
    <table border="0.5" bgcolor="#CCFFCC" cellpadding="2" cellspacing="5">
    <tr>
    <td><input type="button" onclick="insRow('myTable2')" value="Insert row"></td>
    <td><input type="button" onclick="delRow('myTable2')" value="delete row"></td>
    </tr>
    </table>
    </td>
    </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
    •