如何使用jQuery动态地将HTML叠加层添加到表行？

Question

I have the 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 the column I need to show the following menu as an overlay over 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>

Answer 1

You can apply position:relative for the <tr> , position:absolute for the menu ( to take it out of normal flow, So that the table cells won't jump around ) and append the menu to the respective <tr> which is hovered.

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> 

---

Side note: I also took the liberty to separate the heading into <thead> and data into <tbody> , and moved the inline styles to CSS. The script will work regardless.

Answer 2

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';
  });
});