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

Question

我想检测 responsive 中的最后一个可见列Datatables。我的目标是在每行的悬停状态上添加右边框。

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

有什么解决方案可以让我获得可见的列并添加可见class的列TD吗？所以我可以应用 CSS 使用:last-of-type

Answer 1

我有解决方案，但这不是本地的，所以我不喜欢，但我一直在使用，直到我得到适当的解决方案。

function getLastVisibleColumn(){
  $('table tr td').removeClass('lastVisibleChild');
  $('table tr').each(function(){
  	$(this).find('td:visible:last').addClass('lastVisibleChild');
  });
}
$(window).resize(function(){
  getLastVisibleColumn();
});
$(document).ready(function(){
  getLastVisibleColumn();
});

.lastVisibleChild {
  background: #9F9;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td style="display:none">Text</td>
      <td style="display:none">Text</td>
      <td style="display:none">Text</td>
    </tr>
    <tr>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td style="display:none">Text</td>
      <td style="display:none">Text</td>
      <td style="display:none">Text</td>
    </tr>
    <tr>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td style="display:none">Text</td>
      <td style="display:none">Text</td>
      <td style="display:none">Text</td>
    </tr>
  </tbody>
</table>

Answer 2

您可以使用 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>