Edit and Delete on mouseover of jQuery Datatable

Question

I am trying to show edit and delete buttons on mouse over of a tr in jQuery Datatable. In the process, I am almost done, but I have defined 3rd column to contain edit and delete buttons.

Below is the html and jQuery code

<table id="example" class="display" cellspacing="0" width="100%">
   <thead>
      <tr>
         <th>Name</th>
         <th>Position</th>
         <th></th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>Tiger Nixon</td>
         <td>System Architect</td>
         <td></td>
         <!-- <td>Extra td</td> -->
      </tr>
      <tr>
         <td>Garrett Winters</td>
         <td>Accountant</td>
         <td></td>
         <!-- <td>Tokyo</td> -->
      </tr>
      <tr>
         <td>Ashton Cox</td>
         <td>Junior Technical Author</td>
         <td></td>
         <!-- <td>San Francisco</td> -->
      </tr>
      <tr>
         <td>Cedric Kelly</td>
         <td>Senior Javascript Developer</td>
         <td></td>
         <!-- <td>Edinburgh</td> -->
      </tr>
   </tbody>
</table>

jQuery/js code

var trIndex = null;
 $("#example tr td").mouseenter(function() {
     trIndex = $(this).parent();
     $(trIndex).find("td:last-child").html('<a href="">Edit</a>&nbsp;&nbsp;<a href="">Delete</a>');
 });

 // remove button on tr mouseleave

 $("#example tr td").mouseleave(function() {
     $(trIndex).find('td:last-child').html("&nbsp;");
 });

Below screenshot represents my output.

It looks like the edit and delete operations are for the second column td. I would like to make it like the below example, which doesn't show up column for edit and delete, moreover these looks like they are outside table

Answer 1

Placing the edit/delete button outside table would be a problem. Because the mouseenter/mouseleave methods are for the table, if the mouse is over edit/delete button, it would be considered as mouseleave for the table and the buttons would never be visible at all.

Instead have a column for the edit/delete button as well and style it so that it looks as if it is outside the table.

You can define how the last column should look like by columnDefs option. Something like this maybe

var myTable = $('#example').DataTable({
    "columnDefs": [{ "targets": [2], "orderable": false, width: '20%', "sClass": 'options' }]
});

The above piece of code will set width, remove sorting icon over the thead and add a class options for the last column.

You need some css to make it look as if it is outside the table as well. The below should do it

#example{
    border-bottom: none;
}
#example tr:last-child td:not(.options){ /* <---- options will be the class for last column */
    border-bottom: 1px solid;
}
#example .options{
    background: white;
    border: none;
}

Here is a demo http://jsfiddle.net/dhirajbodicherla/189Lp6u6/7/