在jQuery Datatable的鼠标悬停时编辑和删除

Question

我试图在jQuery Datatable中的tr上显示编辑和删除按钮。在这个过程中，我差不多完成了，但我已经定义了第3列，包含编辑和删除按钮。

下面是html和jQuery代码

<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;");
 });

下面的截图代表我的输出。

看起来编辑和删除操作适用于第二列td。我想使它像下面的例子，它没有显示编辑和删除列，而且这些看起来像他们在表外

Answer 1

将编辑/删除按钮放在表格外是一个问题。由于mouseenter / mouseleave方法适用于表格，如果鼠标位于编辑/删除按钮之上，则会将其视为表格的鼠标左键，按钮将永远不会显示。

还有一个用于编辑/删除按钮的列，并对其进行样式设置，使其看起来好像在表格之外。

您可以通过columnDefs选项定义最后一列的外观。这样的事可能

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

上面的代码将设置宽度，删除thead上的排序图标，并为最后一列添加一个类options。

你需要一些css才能使它看起来好像在桌子之外。以下应该这样做

#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;
}

这是一个演示 http://jsfiddle.net/dhirajbodicherla/189Lp6u6/7/