get Last Visible Column in datatables in responsive state

by Faisal Khan Janjua

HTML

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

CSS

.lastVisibleChild {
  background: #9F9;
}

JavaScript

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();
});