SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    Join Date
    Feb 2002
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    showing/hiding <TR>

    hi all

    i have a script that opens a <tr> when a ahref is clicked, but i want to further the script to close the <tr> that the ahref is located in.

    here is what i have

    Javascript

    Code:
    <SCRIPT language=JavaScript>
    function showTR(id){
    	  if (document.getElementById && document.createTextNode)
    	{
    		 var tr=document.getElementById(id);
    		   if(tr.style.display=='' || tr.style.display=='none')
    			{
    				tr.style.display='inline'; 
    			}else {
    				tr.style.display='none'; 
    			}	   
    	}
    }
    </SCRIPT>

    then my table layout

    HTML Code:
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
    	<tr id="tr1" style="display:inline">
    	  <td><A href="#" onClick="showTR('tr2')">click to show tr 2 </A></td>
    	</tr>
    	<tr id="tr2" style="display:none">
    	  <td><table width="100%" border="0" cellspacing="0" cellpadding="0">
    		<tr>
    		  <td>stuff in tr 2. blah blah blah blah </td>
    		</tr>
    	  </table></td>
    	</tr>
    	<tr>
    	  <td>&nbsp;</td>
    	</tr>
      </table>
    so when you click the link click to show tr 2 it will show
    <tr id="tr2" style="display:inline">

    and hide tr 1
    <tr id="tr1" style="display:none">

    cheers aron

  2. #2
    Caveat surfer Buddy Bradley's Avatar
    Join Date
    May 2003
    Location
    Cambridge, UK
    Posts
    2,366
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What's your question - that code does what you describe? If you use 'display: block' instead it will behave more like a proper table.

  3. #3
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Tip: the default display for table rows is "table-row" in Firefox and other modern browsers

  4. #4
    SitePoint Member
    Join Date
    Feb 2002
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok i got it to work. but the page keeps jumping to the top of the screen, how do i stop this.

    javascript

    Code:
    unction showTR(id){
    	  if (document.getElementById && document.createTextNode)
    	{
    		 var tr=document.getElementById(id);
    		   if(tr.style.display=='' || tr.style.display=='none')
    			{
    				tr.style.display='inline'; 
    			}else {
    				tr.style.display='none'; 
    			}
    			   
    	}
    }
    
    function hideTR(id){
    	  if (document.getElementById && document.createTextNode)
    	{
    		 var tr=document.getElementById(id);
    		   if(tr.style.display=='inline')
    			{
    				tr.style.display='none'; 
    			}else {
    				tr.style.display='inline'; 
    			}
    			   
    	}
    }
    HTML.

    Code:
    <TD colSpan=4 id="domains_hide" style="display:inline"><p class="table"><IMG height=19 
    						src="/images/table_expand.gif" 
    						width=19 align=absMiddle border=0>&nbsp;&nbsp;<A 
    						href="#" onClick="showTR('domains'),hideTR('domains_hide')">Domains</A></p></TD>
    			</TR>
    			<TR>
    			  <TD colSpan=4 valign="top" id="domains" style="display:none" >the content in the cell.</TD>

  5. #5
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    return false from the onclick of the <a> tag to prevent the href from being processed.

  6. #6
    SitePoint Member
    Join Date
    Feb 2002
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    as in

    Code:
    <A 
    						href="#" onClick="showTR('domains'),hideTR('domains_hide')" return false;>Domains</A>
    is that what you mean?

  7. #7
    SitePoint Member
    Join Date
    Feb 2002
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok i got it, its working now.. thanks jimfraser.

    cheers aron.


Bookmarks

Posting Permissions

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