鼠标悬停在 jQuery 数据表上进行编辑和删除

Question

我试图在 jQuery 数据 table 中的 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代码

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

Answer 1

将 edit/delete 按钮放在 table 之外会有问题。因为 mouseenter/mouseleave 方法适用于 table，如果鼠标在 edit/delete 按钮上，它会被认为是 table 的 mouseleave，按钮永远不会在全部.

而是为 edit/delete 按钮也设置一列，并对其设置样式，使其看起来好像在 table 之外。

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

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

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

你需要一些 css 来让它看起来好像也在 table 之外。下面应该做

#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/

鼠标悬停在 jQuery 数据表上进行编辑和删除

Edit and Delete on mouseover of jQuery Datatable

css

jquery

datatables

jquery-datatables-editor