jquery - 如何在数据表的响应状态下检测最后一个可见列

Question

我想检测响应式 Datatables 中的最后一个可见列。我的目标是在每行的悬停状态下添加 border-right。

由于 last-child 不起作用，我尝试了 CSS 选择器 tr:hover td:visible:last，但它不起作用。

是否有任何解决方案可以让我获得可见列并在可见 TD 上添加 class？所以我可以使用 :last-of-type

应用 CSS

Answer 1

您可以使用 domsubtreemodified 和窗口调整大小事件检测窗口调整大小和 DOM 更改事件。你不能使用纯 css 来做到这一点，因为你不能将 :not 和 :style[] 选择器组合在一起

$(window).resize(function(){
  $('td:visible:last').css('color', 'red');
});
$(document).ready(function(){
  $('td:visible:last').css('color', 'red');
});
$('table , table td').on("DOMSubtreeModified",function(){
  $('td').css('color', 'black');
  $('td:visible:last').css('color', 'red');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tbody>
<td>Home1</td>
<td>Home2</td>
<td>Home3</td>
<td style="display:none">Home4</td>
<td style="display:none">Home5</td>
<td style="display:none">Home6</td>
</tbody>
</table>