Clever Geek Handbook

How can I dynamically add an HTML overlay to a table row using jQuery?

I have a table structure given below:

<table>
      <tr id="Row1">
         <td class="Column1">Column</td>
         <td class="Column2">Column2</td>
     </tr>
      <tr id="Row2">
        <td class="Column1">text</td>
        <td class="Column2">Image</td>
    </tr>
</table>

When I hover over a column, I need to show the following menu as an overlay above the first column

<div class="drawer" style="display:none;">
   <ul class="nav nav-tabs nav-stacked">
      <li class="active"><a href="#">Products</a></li><!-- active link changes -->
      <li><a href="#">Information</a></li>
      <li><a href="#">History</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Orders Complete</a></li>
   </ul>
</div>
+3


source to share


2 answers


You can apply position:relative

for <tr>

, position:absolute

for a menu (take it out of the normal flow so that table cells don't jump) and add a menu to the corresponding <tr>

one that hangs.

something like the following:



$("table tbody tr").hover(function(event) {
  $(".drawer").show().appendTo($(this).find("td:first"));
}, function() {
  $(this).find(".drawer").hide();
});
      

        
        
        
      

    
tbody tr {
  position: relative;
}
.drawer {
  display: none;
  position: absolute;
  background:dodgerblue;
}
      

        
        
        
      

    
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <th class="Column1">Column</th>
      <th class="Column2">Column2</th>
    </tr>
  </thead>
  <tbody>
    <tr id="Row1">
      <td class="Column1">text</td>
      <td class="Column2">Image</td>
    </tr>
    <tr id="Row2">
      <td class="Column1">text</td>
      <td class="Column2">Image</td>
    </tr>
  </tbody>
</table>
<div class="drawer">
  <ul class="nav nav-tabs nav-stacked">
    <li class="active"><a href="#">Products</a>
    </li>
    <!-- active link changes -->
    <li><a href="#">Information</a>
    </li>
    <li><a href="#">History</a>
    </li>
    <li><a href="#">Services</a>
    </li>
    <li><a href="#">Orders Complete</a>
    </li>
  </ul>
</div>
Run codeHide result


Side note: I also took the liberty of splitting the header into <thead>

and the data into, <tbody>

and moved the inline styles into CSS. The script will run regardless.

+1


source


Try this, it doesn't require any changes to your existing HTML / CSS:



$('.Column1').mouseover(function(e){

  $('.drawer').css({
    'display': 'block';
    'position': 'absolute';
    'left': e.pageX;
    'top':e.pageY;
  });
}).mouseleave(function(e){
  $('.drawer').css({
    'display': 'none';
  });
});
0


source






More articles:


All Articles