表格行悬停以显示工具栏

Question

我的 HTML 代码遇到了一些问题。 当用户将鼠标悬停在表格中的行上时，我试图在该行显示一个按钮工具栏。 下面是我的代码：

 $(document).ready(function () { var $divOverlay = $('#DivToShow'); $('#grid').on("mouseover", "tbody > tr", function () { var bottomWidth = $(this).css('width'); var bottomHeight = $(this).css('height'); var rowPos = $(this).position(); bottomTop = $(this).offset().top; bottomLeft = rowPos.left; $divOverlay.css({ position: 'absolute', top: bottomTop, //left: bottomLeft, height: bottomHeight }); $divOverlay.show(); }); $('#resultGrid').on("mouseleave", "tbody > tr", function () { $divOverlay.hide(); }); $divOverlay.mouseleave(function () { $divOverlay.hide(); }); });

 #DivToShow { display:none; position:absolute; z-index:10; right:0; padding-right:10px; } tr:hover { background-color: #ebebeb; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script> <div style="overflow-x:auto;"> <table id="grid" width="100%" border="1" cellspacing="0" cellpadding="0"> <tbody> <tr> <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td> <td>a</td> <td>a</td> <td>a</td> <td>a</td> <td>a</td> <td>a</td> <td>a</td> <td>a</td> <td>a</td> <td>a</td> <td>a</td> <td>a</td> <td>a</td> <td>a</td> <td>a</td> </tr> <tr > <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> </tr> <tr> <td>c</td> <td>c</td> <td>c</td> <td>c</td> <td>c</td> <td>c</td> <td>c</td> <td>c</td> <td>c</td> <td>c</td> <td>c</td> <td>c</td> <td>c</td> <td>c</td> <td>c</td> <td>c</td> </tr> <tr > <td>d</td> <td>d</td> <td>d</td> <td>d</td> <td>d</td> <td>d</td> <td>d</td> <td>d</td> <td>d</td> <td>d</td> <td>d</td> <td>d</td> <td>d</td> <td>d</td> <td>d</td> <td>d</td> </tr> <tr> <td>e</td> <td>e</td> <td>e</td> <td>e</td> <td>e</td> <td>e</td> <td>e</td> <td>e</td> <td>e</td> <td>e</td> <td>e</td> <td>e</td> <td>e</td> <td>e</td> <td>e</td> <td>e</td> </tr> </tbody> </table> </div> <div id="DivToShow" > <button>Edit</button> &nbsp; <button>Dup</button>&nbsp; <button>Delete</button> </div>

这是我想要实现的一些事情：

1. 当前，当用户将鼠标悬停在表格行上时，它会突出显示。 当用户将鼠标悬停在按钮工具栏部分时，我也希望突出显示该行。

2. 当用户鼠标离开该行时，按钮工具栏应该消失。 现在它只会在用户将鼠标悬停在按钮工具栏部分时消失。

3. 无论如何，当我单击编辑按钮时，我可以获得当前行数据吗？

我将不胜感激任何帮助。

Answer 1

我相信你想要完成的事情可以很容易地用 css 完成，除了 clickevent 部分

这是最简单的方法，我希望这是想要的

 function edit(value){ console.log(value); } function dup(value){ console.log(value); } function remove(value){ console.log(value); }

 #DivToShow { display:none; position:absolute; z-index:10; top: 0; right:0; bottom: 0; left: 0; text-align: right; } td { position: relative; } tr:hover { background-color: #ebebeb; } tr:hover #DivToShow{ display:block }

 <table id="grid" width="100%" border="1" cellspacing="0" cellpadding="0"> <tbody> <tr> <td>a</td> <td>a</td> <td>a</td> <td>a <div id="DivToShow" > <button onClick="edit('a')">Edit</button> <button onClick="dup('a')">Dup</button> <button onClick="remove('a')">Delete</button> </div> </td> </tr> <tr > <td>b</td> <td>b</td> <td>b</td> <td>b <div id="DivToShow" > <button onClick="edit('b')">Edit</button> <button onClick="dup('b')">Dup</button> <button onClick="remove('b')">Delete</button> </div> </td> </tr> <tr> <td>c</td> <td>c</td> <td>c</td> <td>c <div id="DivToShow" > <button onClick="edit('c')">Edit</button> <button onClick="dup('c')">Dup</button> <button onClick="remove('c')">Delete</button> </div> </td> </tr> <tr > <td>d</td> <td>d</td> <td>d</td> <td>d <div id="DivToShow" > <button onClick="edit('d')">Edit</button> <button onClick="dup('d')">Dup</button> <button onClick="remove('d')">Delete</button> </div> </td> </tr> <tr> <td>e</td> <td>e</td> <td>e</td> <td>e <div id="DivToShow" > <button onClick="edit('e')">Edit</button> <button onClick="dup('e')">Dup</button> <button onClick="delete('e')">Delete</button> </div> </td> </tr> </tbody> </table>