Как обнаружить последний видимый столбец в отзывчивом состоянии Datatables

Question

Я хочу обнаружить последний видимый столбец в отзывчивом 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

Вы можете определить изменение размера окна и события DOM, используя domsubtreemodified и событие изменения размера окна.Вы не можете сделать это, используя чистый 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>