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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    May 2006
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Anyway to link elements and change them all dynamically?

    Thanks for checking this out, here's my problem.

    I am given a list of data, and from that I need to create a table where each row is of the form:

    field comment editButton deleteButton

    So when someone hits the editButton I want to be able to change that to a different button (a confirm button which confirms the change) but I would also like to change it so that the <input type="text"> becomes editable and looks like a text field (i.e. the style and readonly tags are removed.). Then after a user hits confirm, it will go back to looking like it did.

    Anyways I think I can figure out how to write the functions to do what I want, but what I can't seem to find anywhere is a way to get the element Id's that I need, so that when the edit button is clicked, I can also get the id of the text field("text1") in that row and make the appropriate changes or when I click delete, I can get the id of the row "Tr1" and remove the row.

    If anyone has any ideas it would be very much appreciated, or if you know of a site where I can go to figure this out, that would also be nice.

    Thanks in advance,

    Code:
    <table cellpadding="10" id="table1">
      <tbody>
          <tr align="left"><th><u>Field</u></th><th><u>Comment</u></th></tr>
          <tr id="Tr1">
              <td>example!</td>
              <td><input id="text1" type="text" style="border-style:none;background-color:transparent" readonly="readonly"  value="...with comment!" /></td>
              <td><input id="edit1" type="button" value="Edit" onclick="editRow();" /></td>
              <td><input id"del1" type="button" value="Delete" onclick="delRow();" /></td>
           </tr>

  • #2
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    So when someone hits the editButton I want to be able to change that to a different button (a confirm button which confirms the change)
    This is the part I don't quite understand. The rest is simple. What do you mean by confirm button? What this new "confirm" button must do?
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #3
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,529
    Thanks
    3
    Thanked 511 Times in 498 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>
    <style type="text/css">
    /*<![CDATA[*/
    .readonly {
     border-style:none;background-color:transparent
    }
    
    .write {
    
     }
    
    /*]]>*/
    </style><script language="JavaScript" type="text/javascript">
    /*<![CDATA[*/
    
    var TBObj;
    var zxcEvt=0;
    
    
    function editRow(obj){
     var tr=obj;
     while (tr.tagName!='TR'){ tr=tr.parentNode; }
     var tb=tr.getElementsByTagName('INPUT')[0];
     obj.set=true;
     tb.set=true;
     if (obj.value=='Edit'){
      tb.className='write';
      tb.save=tb.value;
      tb.active=obj;
      TBObj=tb;
     }
     else {
      tb.className='readonly';
      obj.value='Edit';
      TBObj=false;
     }
    }
    
    function NoType(obj){
     if (!obj.active){ obj.blur(); }
     else { obj.active.value='Confirm'; }
    }
    
    function Complete(zxce){
     if (zxcEventObj(zxce).set||!TBObj){ return; }
     TBObj.className='readonly';
     TBObj.value=TBObj.save;
     TBObj.active.value='Edit';
     TBObj=null;
    }
    
    function zxcEventObj(zxce){
     if (!zxce) var zxce=window.event;
     if (zxce.target) zxceobj=zxce.target;
     else if (zxce.srcElement) zxceobj=zxce.srcElement;
     if (zxceobj.nodeType==3) zxceobj=zxceobj.parentNode;
     return zxceobj;
    }
    
    
    function zxcEventAdd(zxco,zxct,zxcf) {
     if ( zxco.addEventListener ){ zxco.addEventListener(zxct, function(e){ zxco[zxcf](e);}, false); }
     else if ( zxco.attachEvent ){ zxco.attachEvent('on'+zxct,function(e){ zxco[zxcf](e); }); }
     else {
      var zxcPrev=zxco["on" + zxct];
      if (zxcPrev){ zxco['on'+zxct]=function(e){ zxcPrev(e); zxco[zxcf](e); }; }
      else { zxco['on'+zxct]=zxco[zxcf]; }
     }
    }
    
    
    function zxcAddEvent(zxc,zxcfun,zxcevt){
     if (zxc.addEvent){ return; }
     zxc.addEvent=window[zxcfun];
     zxcEventAdd(zxc,zxcevt,'addEvent');
    }
    
    function zxcAddEvt(zxc,zxcfun,zxcevt){
     zxc['zxcaddEvt'+zxcEvt]=window[zxcfun];
     zxcEventAdd(zxc,zxcevt,'zxcaddEvt'+zxcEvt);
     zxcEvt++;
    }
    
    zxcAddEvt(document,'Complete','mouseup')
    
    /*]]>*/
    </script></head>
    
    <body>
    <table cellpadding="10" id="table1">
      <tbody>
          <tr align="left"><th><u>Field</u></th><th><u>Comment</u></th></tr>
          <tr id="Tr1">
              <td>example!</td>
              <td><input id="text1" type="text" class="readonly" onfocus="NoType(this);"  value="...with comment!" /></td>
              <td><input id="edit1" type="button" value="Edit" onclick="editRow(this);" /></td>
              <td><input id"del1" type="button" value="Delete"  /></td>
           </tr>
      </tbody>
    </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
    •