www.webdeveloper.com
Results 1 to 6 of 6

Thread: Callapsing a tables content.

  1. #1
    Join Date
    Aug 2011
    Posts
    4

    Callapsing a tables content.

    Hey I have this table that has six <td>'s inside of a <tr> and I was wondering if there is any way to
    use java to change the html inside the table that will completely remove a <tr></tr> and it's content
    when I click a href or a button. Is it possible?

    I also want to change a image on the page after the tables are collapsed to a different image that will uncollapse
    the table and pretty place the <tr>'s back on the page kind of like using innerHTML. I don't want the page to reload
    either.

  2. #2
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,252
    Do you have some sample code to modify?
    At least the HTML portion you want to change.

  3. #3
    Join Date
    Aug 2011
    Posts
    4

    Heres the table with the code that I want to change.

    Code:
    			<table>
    				<tr>
    					<td>&nbsp;</td>
    					<td name=header align="center" nowrap valign="top"><font size="2">Forum</font></td>
    					<td name=header align="center" nowrap valign="top"><font size="2">Topics</font></td>
    					<td name=header align="center" nowrap valign="top"><font size="2">Posts</font></td>
    					<td name=header align="center" nowrap valign="top"><font size="2">Last Post</font></td>
    					<td>&nbsp;</td>
    				</tr>
    <!-- The code below I want to change -->
    <!-- The code below should appear when not collapsed -->
    				<tr>
    	    			<td colspan="5" valign="top" class=member2><a class="collapse" href="">
    	    			<img src="icon_minus.gif" width="10" height="10" border="0"/>
    	    			</a>&nbsp;<a class="collapse" href="" title="View only the Forums in this Category">
    	    			<font size="2"><i>Contests and Featured Items</i></font></a>&nbsp;&nbsp;</td>
    				</tr>
    <!-- The code below should appear when collapsed -->
    				<tr>
    	    			<td colspan="5" valign="top" class=member2><a class="collapse"href="">
    	    			<img src="icon_PLUS.gif" width="10" height="10" border="0"/>
    	    			</a>&nbsp;<a class="collapse" href="" title="View only the Forums in this Category">
    	    			<font size="2"><i>Contests and Featured Items</i></font></a>&nbsp;&nbsp;</td>
    				</tr>
    <!-- The code above I  want to change -->
    
    				<tr>
    					<td><img src="topic.gif" border="0"></td>
    					<td>
    						<a href="Science/index.php">Science</a><br>
    						This topic is for all science related topics.<br>
    					</td>
    					<td>&nbsp;</td>
    					<td>&nbsp;</td>
    					<td>&nbsp;</td>
    					<td><img src="post.gif" border ="0"></td>
    				</tr>
    			</table>

  4. #4
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,252

    Lightbulb

    You didn't specify what the trigger was to cause the change, so I just made it a BUTTON.
    Alter as necessary.
    Code:
    <!DOC HTML>
    <html>
    <head>
    <title> Untitled </title>
    <script type="text/javascript">
    function toggle(Info) {
      var CState = document.getElementById(Info);
      if (CState.style.display != "block") { CState.style.display = "block"; }
                                      else { CState.style.display = "none"; }
    }
    </script>
    
    </head>
    <body>
    <button onclick="toggle('hideRow1');toggle('hideRow2')">Hide/Show</button>
    <table border="1">
     <tr>
      <td>&nbsp;</td>
      <td name=header align="center" nowrap valign="top"><font size="2">Forum</font></td>
      <td name=header align="center" nowrap valign="top"><font size="2">Topics</font></td>
      <td name=header align="center" nowrap valign="top"><font size="2">Posts</font></td>
      <td name=header align="center" nowrap valign="top"><font size="2">Last Post</font></td>
      <td>&nbsp;</td>
     </tr>
    
    <!-- The code below I want to change -->
    <!-- The code below should appear when not collapsed -->
     <tr id="hideRow1" style="display:block">
      <td colspan="6" valign="top" class=member2>
       <a class="collapse" href="">
       <img src="icon_minus.gif" width="10" height="10" border="0"/></a>
       &nbsp;<a class="collapse" href="" title="View only the Forums in this Category">
       <font size="2"><i>Contests and Featured Items ONE</i></font></a>
       &nbsp;&nbsp;
      </td>
     </tr>
    
    <!-- The code below should appear when collapsed -->
     <tr id="hideRow2" style="display:none">
      <td colspan="6" valign="top" class=member2>
       <a class="collapse" href="">
       <img src="icon_PLUS.gif" width="10" height="10" border="0"/></a>
       &nbsp;<a class="collapse" href="" title="View only the Forums in this Category">
       <font size="2"><i>Contests and Featured Items TWO</i></font></a>
       &nbsp;&nbsp;
      </td>
     </tr>
    <!-- The code above I want to change -->
    
     <tr>
      <td><img src="topic.gif" border="0"></td>
      <td>
       <a href="Science/index.php">Science</a><br>
        This topic is for all science related topics.<br>
      </td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td><img src="post.gif" border ="0"></td>
     </tr>
    </table>
    
    </body>
    </html>

  5. #5
    Join Date
    Aug 2011
    Posts
    4
    That works very well. Thank you very much.

  6. #6
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,252

    Thumbs up

    Quote Originally Posted by errigour View Post
    That works very well. Thank you very much.
    You're most welcome.
    Happy to help.
    Good luck!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles