1

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

4

1 回答 1

2

将编辑/删除按钮放在表外会是一个问题。因为 mouseenter/mouseleave 方法是针对表格的，所以如果鼠标悬停在编辑/删除按钮上，它会被认为是针对表格的 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/

于 2015-06-17T17:09:07.997 回答