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

类似以下内容：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

旁注：我也冒昧地将标题分为<thead>，将数据分成<tbody>，并将内联样式移至CSS。该脚本无论如何都可以使用。

Answer 2

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

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

2 个答案: