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

【问题标题】：How to detect last visible column in responsive state of Datatables如何检测数据表响应状态下的最后一个可见列
【发布时间】：2018-12-26 08:54:46
【问题描述】：

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

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

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

【问题讨论】：

您想匹配之前隐藏单元格的最后一个单元格，还是所有可见单元格？

标签： jquery css datatables

【解决方案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>

【讨论】：

是的，它会工作，但如何检测更改事件？如果在隐藏列表中添加/删除新列，它将不起作用......屏幕分辨率也会发生变化。所以我需要更改响应事件（我认为 responsive.recalc() 但不知道它将如何自动运行）

【解决方案2】：

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

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>

【讨论】：