Button menu below table row when mouse over

问题

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>

回答1:

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>

来源：https://stackoverflow.com/questions/44120517/button-menu-below-table-row-when-mouse-over

标签

jquery

html

css

html-table