本文介绍了鼠标悬停在表格行下方的按钮菜单的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在做一个项目,在该项目中,表的单行上会有很多信息.为了不浪费空间,我试图找到一种方法来在表格中所选行的正下方放置一个带有按钮的集中行.就像这样:

I am doing a project where I will have lots of information on a single row of a table. So to not lose space, I'm trying to find a way to put a centralized row with buttons, just below the row selected in the table. just like this:

$('#mytable tr').hover(function() {
    $(this).addClass('hover');
}, function() {
    $(this).removeClass('hover');
});
#mytable tr:hover {
    background-color:lightblue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="mytable" border="1" width="100%">
<tr>
  <td>HEADER 1</td>
  <td>HEADER 2</td>
  <td>HEADER 3</td>
  <td>HEADER 4</td>
</tr>
<tr>
  <td>Item 1</td>
  <td>a</td>
  <td>aa</td>
  <td>aaa</td>
</tr>
<tr>
  <td>Item 2</td>
  <td>b</td>
  <td>bb</td>
  <td>bbb</td>
</tr>
<tr>
  <td>Item 3</td>
  <td>c</td>
  <td>cc</td>
  <td>ccc</td>
</tr>
</table>

推荐答案

您是否正在寻找类似的东西?

Are you looking for something like this?

$(document).ready(function() {

  $('#mytable tbody tr').hover(function() {
    $(this).addClass('hover');

    var rowP = $(this).offset();
    var rowH = $(this).height();
    var offset = rowP.top + rowH;
    var left = $('td:first', $(this)).width() + 20;

    $('td:first', $(this)).prepend($('.button-pane'));
    $('.button-pane', $(this)).css({
      'margin-top': offset + 'px',
      'margin-left': left + 'px'
    }).show();

  }, function(event) {
    $(this).remove('.button-pane');
    $(this).removeClass('hover');
    $('.button-pane').hide();
  });


});
#mytable tbody tr:hover {
  background-color: lightblue;
}

.button-pane {
  display: none;
  position: absolute;
  float: left;
  top: 0px;
  left: 0px;
  background-color: lightblue;
  width: 150px;
  height: 30px;
  padding: 4px;
  text-align: center;
}

.button-pane button {
  display: inline;
  cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="mytable" border="1" width="100%">
  <thead>
    <tr>
      <td>HEADER 1</td>
      <td>HEADER 2</td>
      <td>HEADER 3</td>
      <td>HEADER 4</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Item 1</td>
      <td>a</td>
      <td>aa</td>
      <td>aaa</td>
    </tr>
    <tr>
      <td>Item 2</td>
      <td>b</td>
      <td>bb</td>
      <td>bbb</td>
    </tr>
    <tr>
      <td>Item 3</td>
      <td>c</td>
      <td>cc</td>
      <td>ccc</td>
    </tr>
  </tbody>
</table>
<div class="button-pane">
  <button id="button1">Button 1</button>
  <button id="button2">Button 2</button>
</div>

这篇关于鼠标悬停在表格行下方的按钮菜单的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-24 19:30
查看更多