Insert div between table rows

actually overlays div over larger table row

by clairesuzy

HTML

<div id="table-wrap">
<table summary="test" cellspacing="0" id="master">
    <colgroup>
        <col width="40px">
        <col span="4" width="25%">
    </colgroup>

<thead>
   <tr>
     <th>&nbsp;</th>
     <th><span>Customer</span></th>
     <th><span>OrderID</span></th>
     <th><span>Order date</span></th>
     <th><span>Order Total</span></th>
   </tr>
</thead>

<tbody>
    <tr>
        <td><input type="button" name="" value=" " data-href="#content1" ></td>
        <td>Ernst Handel</td><td>10258</td><td>07/17/1996</td><td>$403.72</td>
    </tr>
    
    <tr>
        <td><input type="button" name="" value=" " data-href="#content2"></td>
        <td>Wartian Herkku</td><td>10270</td><td>08/01/1996</td><td>$1,376.00</td>
    </tr>
    
    <tr>
        <td><input type="button" name="" value=" " data-href="#content3"></td>
        <td>Magazzini Alimentari Riuniti</td><td>10275</td><td>08/07/1996</td><td>$15.36</td>
    </tr>
    
    </tbody>
</table>

<div id="content1">
<h2>content for row 1</h2>
<table>
    <thead>
        <tr>
            <th>head 1</th><th>head 2</th><th>head 3</th><th>head 4</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>cell 1</td><td>cell 2</td><td>cell 3</td><td>cell 4</td>
        </tr>
    </tbody>
</table>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div><!-- content1 -->

<div id="content2">
<h2>content for row 2</h2>
<table>
    <thead>
        <tr>
            <th>head 1</th><th>head 2</th><th>head 3</th><th>head 4</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>cell 1</td><td>cell 2</td><td>cell 3</td><td>cell 4</td>
        </tr>
    </tbody>
</table>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis...

CSS

table {
   table-layout: fixed;
   width: 100%;
   border-collapse: collapse;
   }

td {border: 1px solid #000; padding: 5px; vertical-align: top;}

[id*=content] {
background: #eee;
position: absolute;
display: none;
}

#table-wrap {position: relative;}
p {margin: 1em 0;}

JavaScript

$(document).ready(function() {

$("input").click(function() {
 var thisRow = $(this).closest('tr'); //parent row of the input or whatever is the click trigger
 var conDiv = $(this).data("href"); //returns #content1 - id of the content div you want shown
 var conH = $(conDiv).height(); //corresponding content div height
 var rowH = $(thisRow).height(); // this row height
 var newrowH = conH + rowH; //the new row height
 var posL = $(thisRow).position().left; // left position that div needs to be
 var posT = $(thisRow).position().top + rowH + 5 + 'px';  // top position that div needs to be ** not working properly!!
 

   if ( $(conDiv).is(":visible") ) {
       $(thisRow).css({"height" : "auto"});
       $(conDiv).css({"display" : "none", "left": "auto", "top" : "auto" });
   } else  {
       //reset all rows to normal height
       $("tr").css({"height" : "auto"}); 
       //expand the height of this row
       $(thisRow).css({"height" : newrowH});
       
       // reset all content divs.. hide them             
       $("[id*=content]").css({"display" : "none", "left": "auto", "top" : "auto"}); 
       //show the one you want
       $(conDiv).css({"display" : "block", "left": posL, "top" : posT});
   }
});

});