SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    Pragmatic Programmer halfasleeps's Avatar
    Join Date
    Feb 2006
    Location
    Altoona, PA. USA
    Posts
    1,945
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    how to put DIV between table rows?

    I have a table of a long list of information. If one row is clicked on I want to make that perticular one expand with extra stuff/elements without disrupting the display of the other elements:

    its hard to explain so I will try to explain it with the HTML below:

    HTML Code:
    <table width="200" border="1">
      <tr id="1">
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr id="2">
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <DIV>EXPANDING UPON ROW 2 AT BLOCK LEVEL But UN-effecting ROW 1 AND 3</DIV>
      <tr id="3">
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
    </table>
    does anyone know how to do what I want or even know what I am talking about?

    Thanks!
    Altoona Design
    Freelance Flex developer for hire.
    ActionScript Programmer with 8 Years Experience.

  2. #2
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can't. You'd have to create a new table row and then populate that with a table cell that spans the entire row, then put your DIV in there.

    Either that, or split it into two separate tables.

  3. #3
    Floridiot joebert's Avatar
    Join Date
    Mar 2004
    Location
    Kenneth City, FL
    Posts
    823
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Is this close ?

    Code XML:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    	<title>Title</title>
    	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
    	<style type="text/css">
    	.extra {
    		display: none;
    	}
    	</style>
    	<script type="text/javascript">
    	function toggleSibling(sibling){
    		sibling = sibling.nextSibling;
    		while(!/tr/i.test(sibling.nodeName)){
    			sibling = sibling.nextSibling;
    		}
    		sibling.style.display = sibling.style.display == 'table-row' ? 'none' : 'table-row';
    	}
    	</script>
    </head>
    <body>
    	<table width="200" border="1" id="tb">
      <tr id="a" onclick="toggleSibling(this)">
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr class="extra">
        <td colspan="3">&nbsp;</td>
      </tr>
      <tr id="b" onclick="toggleSibling(this)">
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr class="extra">
        <td colspan="3">&nbsp;</td>
      </tr>
      <tr id="c" onclick="toggleSibling(this)">
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr class="extra">
        <td colspan="3">&nbsp;</td>
      </tr>
    </table>
    </body>
    </html>

  4. #4
    Pragmatic Programmer halfasleeps's Avatar
    Join Date
    Feb 2006
    Location
    Altoona, PA. USA
    Posts
    1,945
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @joebert very cool, this worked in FF but not IE7.
    Altoona Design
    Freelance Flex developer for hire.
    ActionScript Programmer with 8 Years Experience.

  5. #5
    Floridiot joebert's Avatar
    Join Date
    Mar 2004
    Location
    Kenneth City, FL
    Posts
    823
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't have access to IE7 to test with.

    I bet it's got somthing to do with the use of "table-row" instead of "block" though. Try swapping it out.

  6. #6
    SitePoint Member
    Join Date
    Dec 2007
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    why can't you place <div> inside <tr><td> .. </td></tr> and open and close it as much as you like?
    Inside <div> can contain another table with rows you need if you like table s so much.

    <tr><td>
    <div>
    <table>
    ...
    </table>
    </div>
    </td></tr>

    or use nested lists - like navigation - could work better than tables

  7. #7
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,788
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Why would you want to put a div in the middle of a table. If the div really belongs there then either you have two separate tables (one before and one after the div) or you are using tables incorrectly in the first place.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">


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
  •