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

    Accessing tablecell values through DOM

    Hi,
    I am a new member to this forum.

    Plz help me with this problem.

    I have a web page with a table displayed in it.

    I need to select MULTIPLE ROWS from it with mouse click.

    When clicked on a row there should be a color change to indicate that it is selected.

    Then, I need to access the values in the rows, and hence table cells so as to store them back in some other database.

    Thanks in advance.

  • #2
    Senior Coder
    Join Date
    Feb 2006
    Location
    USA
    Posts
    1,013
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I suggest you use checkboxes. If you want to, you can absolutely position the elements off the left side of the viewport. When a row is clicked on, you toggle the checked property of the checkbox.
    Learn CSS. | SSI | PHP includes | X/HTML Validator | CSS validator | Dynamic Site Solutions
    Java != JavaScript && JScript != JavaScript
    Design/program for Firefox (and/or Opera), apply fixes for IE, not the other way around.

  • #3
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,505
    Thanks
    3
    Thanked 501 Times in 488 Posts
    what values?

    but
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    
    <head>
      <title></title>
    <script language="JavaScript" type="text/javascript">
    <!--
    
    function GetRow(zxce){
     var zxcobj=zxcEventObj(zxce)
     var zxcrow;
     while (zxcobj.tagName!='TABLE'){
      if (zxcobj.tagName=='TR'){
       zxcrow=zxcobj;
      }
      zxcobj=zxcobj.parentNode;
     }
     if (!zxcobj.ary){ zxcobj.ary=[]; }
     if (!zxcrow.set){ zxcrow.set=true; zxcobj.ary.push(zxcrow); }
     zxcrow.style.backgroundColor='red';
    }
    
    function ShowRows(tid,txtid){
     var tobj=document.getElementById(tid);
     var txtobj=document.getElementById(txtid);
     if (!tobj.ary){ return; }
     var tds;
     txtobj.value='';
     for (var zxc0=0;zxc0<tobj.ary.length;zxc0++){
      tds=tobj.ary[zxc0].getElementsByTagName('TD');
      tobj.ary[zxc0].style.backgroundColor='white';
      for (var zxc1=0;zxc1<tds.length;zxc1++){
       txtobj.value+=tds[zxc1].innerHTML+',';
      }
     }
     tobj.ary.length=0;
    }
    
    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=tt_eobj.parentNode;
     return zxceobj;
    }
    
    
    
    //-->
    </script></head>
    
    <body>
    <table id="fred" border="1" onclick="GetRow(event);" >
     <tr>
      <td> Tom 0 </td>
      <td> Dick 0 </td>
      <td> Harry 0 </td>
     </tr>
     <tr>
      <td> Tom 1 </td>
      <td> Dick 1 </td>
      <td> Harry 1 </td>
     </tr>
     <tr>
      <td> Tom 2 </td>
      <td> Dick 2 </td>
      <td> Harry 2 </td>
     </tr>
    </table>
    <input type="button" value="ShowRows" onclick="ShowRows('fred','OPTxt');" >
    <input type="text" value="" id="OPTxt" size="100" >
    </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/

  • #4
    New to the CF scene
    Join Date
    Mar 2006
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hello......

    Thanks for the replies.

    My problem is that the table that is displayed is dynamic...which i have obtained through DB using JSP.

    Hence, how to address the rows of the table using seperate check boxes??
    Since, I need to loop to create the check boxes even..just like the rows.

    How do the check boxes need to be addressed(accessed) if all are not given different names..since i made a loop..addressing them by different names.....is that possible???

    Plz guide me as how to address the checkboxes so as to access the values.....

    Note:
    THE SCENARIO I REQUIRE HERE IS JUST LIKE THE YAHOO MIAL WHERE IN I CLICK THE CHECKBOXES SO AS TO DELETE THE MAILS IN THE INBOX.

    The same is the case here...I need to click on the checkboxes so as to delete some of the rows of the DYNAMICALLY growing or generated table.

  • #5
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,505
    Thanks
    3
    Thanked 501 Times in 488 Posts
    did you even look at the code i posted???
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    
    <head>
      <title></title>
    <script language="JavaScript" type="text/javascript">
    <!--
    // by Vic Phillips (09-Mar-2006) http://www.vicsjavascripts.org.uk
    
    function NewRow(tid,cid){
     var tobj=document.getElementById(tid);
     var clone=document.getElementById(cid).getElementsByTagName('TR')[0].cloneNode(true);
     tobj.appendChild(clone);
    }
    
    function DeleteRow(tid){
     var tobj=document.getElementById(tid);
     var trs=tobj.getElementsByTagName('TR');
     var ary=[];
     for (var zxc0=0;zxc0<trs.length;zxc0++){
      ary.push(trs[zxc0]);
     }
     for (var zxc1=0;zxc1<ary.length;zxc1++){
      if (ary[zxc1].getElementsByTagName('INPUT')[1].checked){
       tobj.removeChild(ary[zxc1]);
      }
     }
    }
    
    //-->
    </script>
    
    </head>
    
    <body>
    <table border="1">
    <tbody id="MyTable" ></tbody>
    </table>
    <input type="button" value="New Row" onclick="NewRow('MyTable','Clone');" >
    <input type="button" value="Remove Ticked Rows" onclick="DeleteRow('MyTable');" >
    
    <table id="Clone" border="1" style="position:absolute;visibility:hidden;" >
     <tr>
      <td width="100" ><input ></td>
      <td width="20"><input type="checkbox" ></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/

  • #6
    New to the CF scene
    Join Date
    Mar 2006
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hello Phillips....

    I have gone through the code you posted and I did run it. But, selecting multiple rows through mouse pointer is a problem.

    So, I thought of giving it an implementation through CHECKBOXES just like a mail inbox.

    I once again thank you for the help you have extended to me.

    I hope that you would help me through the scenario of checkbox implementation also.

  • #7
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,505
    Thanks
    3
    Thanked 501 Times in 488 Posts
    t you would help me through the scenario of checkbox implementation also
    thought I did that in my last post
    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
    •