表格行懸停以顯示工具欄

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>