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

【问题标题】：Edit and Delete on mouseover of jQuery Datatable在 jQuery Datatable 鼠标悬停时编辑和删除
【发布时间】：2015-06-17 16:58:32
【问题描述】：

我试图在 jQuery Datatable 中的 tr 鼠标上显示编辑和删除按钮。在这个过程中，我几乎完成了，但我已经定义了第三列来包含编辑和删除按钮。

下面是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 代码

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 的。我想让它像下面的示例一样，它没有显示用于编辑和删除的列，而且这些看起来像是在表格之外

【问题讨论】：

额外列是什么意思？我看了两遍，我觉得你需要给我们一些额外的细节

标签： jquery css datatables jquery-datatables-editor

【解决方案1】：

将编辑/删除按钮放在表格之外会是一个问题。因为 mouseenter/mouseleave 方法是针对表格的，所以如果鼠标悬停在编辑/删除按钮上，将被视为针对表格的 mouseleave，按钮将永远不可见。

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

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

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

上面的代码将设置宽度，删除顶部的排序图标并为最后一列添加一个类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/

【讨论】：