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

Question

我有下面给出的表结构:

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

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

<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

可以申请position:relative对于 <tr> , position:absolute对于菜单(将其从正常流程中取出，以便表格单元格不会跳来跳去)并将菜单附加到相应的 <tr>这是悬停的。

类似下面的内容:

$("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>

---

旁注:我还冒昧地将标题分隔为 <thead>和数据到<tbody> , 并将内联样式移动到 CSS。不管怎样，该脚本都会起作用。