Javascript 如何使用jQuery将HTML覆盖动态添加到表行？

我的表格结构如下所示：

<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>

纵队
专栏2
文本
形象

当我将鼠标悬停在该列上时，我需要将以下菜单显示为覆盖在第一列上

<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>

试试这个，它不需要对现有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';
  });
});

---

您可以为

应用

position:relative

，为菜单应用

position:absolute

（使其脱离正常流程，以便表格单元格不会跳转），并将菜单附加到相应的悬停

如下所示：

$（“表tbody tr”）.hover（函数（事件）{
$（“.drawer”）.show（）.appendTo（$（this.find）（“td:first”）；
}，函数（）{
$（this.find（“.drawer”）.hide（）；
});
t车身tr{
位置：相对位置；
}
.抽屉{
显示：无；
位置：绝对位置；
背景：道奇蓝；
}

纵队
专栏2
文本
形象
文本
形象












您能发布您尝试过的脚本并解释它的问题吗？