SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Addict frankiehots's Avatar
    Join Date
    Jan 2002
    Location
    U.S.A. *Blue State*
    Posts
    289
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Collapsible tr rows instead of divs?

    Doed anyone know if there is a way to do something like this:
    How to Create a Collapsible DIV with Javascript and CSS

    but to hide table rows <tr> instead?

    The problem I am running into is the method in that tutorial relies on is document.getElementById, but in order to hide multiple tr rows I would have to assign them classes instead of ids.

  2. #2
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  3. #3
    rajug.replace('Raju Gautam'); bronze trophy Raju Gautam's Avatar
    Join Date
    Oct 2006
    Location
    Kathmandu, Nepal
    Posts
    4,013
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think just giving the id and applying the style display none and block in the row (<tr id="idname" style="display:none">) from javascript as you have done in div would be the solution.
    Mistakes are proof that you are trying.....
    ------------------------------------------------------------------------
    PSD to HTML - SlicingArt.com | Personal Blog | ZCE - PHP 5

  4. #4
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    But, except in IE, table rows aren't display:block by default and don't act right in Firefox (and maybe other non-IE browsers too) if you set them to it. In CSS2 table rows are display:table-row by default.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  5. #5
    rajug.replace('Raju Gautam'); bronze trophy Raju Gautam's Avatar
    Join Date
    Oct 2006
    Location
    Kathmandu, Nepal
    Posts
    4,013
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    As i have done and worked in Firefox 2.0 and IE 6 that displayne and displayblank no any text) is working collapsing in the case of td. I am not sure on tr. Does this matter in tr and td?
    Mistakes are proof that you are trying.....
    ------------------------------------------------------------------------
    PSD to HTML - SlicingArt.com | Personal Blog | ZCE - PHP 5

  6. #6
    SitePoint Zealot
    Join Date
    Mar 2007
    Posts
    191
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    what about changing their size and overflow? I have a td that gets maximized to full screen width and height, and then can be restored without any page loads... that works if you want to see it.

    document.getElementById('tr').style.width = "0px"
    document.getElementById('tr').style.height = "0px"
    document.getElementById('tr').style.overflow = "hidden"

    ---- or if you wanted to hide all tr's in a table ----

    var tableId = document.getElementById('table1');

    tableId.getElementsByTagName('tr').style.width = "0px"
    tableId.getElementsByTagName('tr').style.height = "0px"
    tableId.getElementsByTagName('tr').style.overflow = "hidden"

    [thats all I could think of, let me know if it helps]

  7. #7
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by frankiehots
    The problem I am running into is the method in that tutorial relies on is document.getElementById, but in order to hide multiple tr rows I would have to assign them classes instead of ids.
    Yes, using classes is one way. Using multiple TBODYs is another way. Or another way is to start with a reference to one row (or its row number) and iterate over the next n rows and hide them - no classes or anything extra needed.

    It just depends on what you want to accomplish. Tell us something about your application, or give us a link.

  8. #8
    SitePoint Addict frankiehots's Avatar
    Join Date
    Jan 2002
    Location
    U.S.A. *Blue State*
    Posts
    289
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry for the delay in replying to this. I was trying to work off the tbody tag with a method that I found elsewhere. A test of what I am working on is at: http://cannon.makibiedev.com/temp/test3.shtml

    It works almost like I need it to, but I also have to find a way to change the "View all messages" to "hide all messages" when the table is fully expanded. Any idea on the best way to do this?

  9. #9
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Frankie,

    Here is one way - maybe not the "best" way, but just a simple illustration:
    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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style tyup="text/css">
    .viewlink {background: url(/images/icons/sm_plus_icon.jpg) no-repeat 0 2px; padding-left: 14px; }
    .analysis {width: 748px; margin: 0; border: 1px solid #666666; border-top: 4px solid #666666; border-right: 0; } 
    .analysis th {border: 1px solid #CCCCCC; height: 25px; vertical-align: bottom;  }
    .analysis th a:link, .analysis th a:visited, .analysis th a:active {color: #666666; display: block; margin-right: 10px; }
    .analysis th a:hover {color: #666666; }
    .analysis td {text-align: left; border: 1px solid #CCCCCC; height: 25px; vertical-align: middle; padding: 0 6px;  }
    </style>
    <script type='text/javascript'>
    window.onload = function()
    {
      document.getElementById('viewLink1').onclick = viewOnClick;
    };
    function viewOnClick()
    {
      if(document.getElementById('allmessages').style.display == 'none') {
        document.getElementById('allmessages').style.display = '';
        if (this.firstChild) this.firstChild.data = 'View Summary';
      }
      else {
        document.getElementById('allmessages').style.display = 'none';
        if (this.firstChild) this.firstChild.data = 'View all Messages';
      }
      return false;
    }
    </script>
    </head>
    <body>
    <table class="analysis">
    		<tr>
    			<th class="datetime"><a href="#" class="sortby">Date/Time</a></th>
    			<th class="author"><a href="#" class="sortby">Author</a></th>
    			<th class="message nor"><a href="#" class="sortby">Message</a></th>
    			
    		</tr>
    		<tr>
    			<td>01/24/07 4:23 AM</td>
    			<td>Bob Smith</td>
    			<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</td>
    		</tr>
    		<tr>
    			<td>02/24/07 4:23 AM</td>
    			<td>Ed Jonees</td>
    			<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</td>
    		</tr>
    		<tbody id="allmessages" style="display: none;">
    		<tr>
    			<td>01/24/07 4:23 AM</td>
    			<td>Edmund Hillary</td>
    			<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</td>
    		</tr>
    		<tr>
    			<td>02/24/07 4:23 AM</td>
    			<td>Tenzing Norgay</td>
    			<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</td>
    		</tr>
    		</tbody>
    	</table>
    	<p class="viewall">
    	<a id='viewLink1' href="" class="viewlink">View all Messages</a></p>
    </body>
    </html>


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
  •