Table row hover to show toolbar

Question

I'm facing some problems with my HTML code. I am trying to display a button toolbar at the row when user hover over the row in a table. Below is my code:

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

And here is some of the things that I want to achieve:

1. Currently the table row gets highlighted when user mouse over it. I would like to keep the row highlighted when user hover on the button toolbar section too.

2. When user mouse leave the row, the button toolbar should disappear. Now it will only disappear when the user got mouse over the button toolbar section.

3. Is there anyway that I can get the current row data when I click on the edit button?

I will appreciate any help.

Answer 1

i believe what you are trying to accomplish can easily be done with css,, except the clickevent part

here is the easiest way to do this, i hope this is what wanted

 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>