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

Question

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

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

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

来应用CSS

Answer 1

您可以使用domsubtreemodified和window resize事件检测Window调整大小和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>

Answer 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>