Überprüfen, ob td zuletzt sichtbar ist td

Question

Ich möchte prüfen, ob die aktuelle Gitterzelle die letzte sichtbare Zelle in der Zeile ist.

//accurately confirms if cell is the last cell in the row, assuming there are no "display: none" cells after it 
var isLastColumn = $(e.target).closest('td').is(':last-child'); 

//doesn't work - obviously because last-child gets the cell regardless of visiility 
var isLastColumn = $(e.target).closest('td').is(':visible:last-child'); 

//doesn't work 
var isLastColumn = $(e.target).closest('td').is('td.visible:last-of-type'); 

//doesn't work 
var isLastColumn = $(e.target).closest('td').is(':visible:last'); 

Wie kann ich, wenn die ausgewählte Zelle letzte sichtbar Spalte der Zeile überprüfen, um zu sehen, ist das?

ich auf das Ereignis am Einhaken mit dem folgenden:

var grid = $("#@gridName").data("kendoGrid"); 
    grid.tbody.on('keydown', onGridKeydown) 


    function onGridKeydown(e) 
    { 
     var isLastColumn = $(e.target).closest('td').is(':last-child'); 
    } 

Answer 1

Es ist höchstwahrscheinlich eine Art und Weise effiziente Art und Weise tut dann unter, aber es scheint zu funktionieren und können Ihnen sagen, wenn Sie in den letzten sind sichtbare Spalte der aktuellen Zeile.

Berücksichtigt man Sie erwähnt display:none wurde verwendet, um andere Spalten zu verstecken, sollten Sie überprüfen können, ob die aktuelle td in der aktuellen Zeile ist die letzte sichtbare td Elemente.

$('button').on('click', function(e) { 
 
    var $td = $(e.target).closest('td'); 
 

 
    var isLastColumn = $td.is($td.closest('tr').find('td:visible:last')); 
 
    alert(isLastColumn) 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="table"> 
 
    <tr> 
 
    <td> 
 
     <button> 
 
     1 
 
     </button> 
 
    </td> 
 
    <td style="display:none"> 
 
     <button> 
 
     2 
 
     </button> 
 
    </td> 
 
    <td> 
 
     <button> 
 
     3 
 
     </button> 
 
    </td> 
 
    <td style="display:none"> 
 
     <button> 
 
     4 
 
     </button> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <button> 
 
     1 
 
     </button> 
 
    </td> 
 
    <td style="display:none"> 
 
     <button> 
 
     2 
 
     </button> 
 
    </td> 
 
    <td> 
 
     <button> 
 
     3 
 
     </button> 
 
    </td> 
 
    <td style="display:none"> 
 
     <button> 
 
     4 
 
     </button> 
 
    </td> 
 
    </tr> 
 
</table> 
 
<table id="table2"> 
 
    <tr> 
 
    <td> 
 
     <button> 
 
     1 
 
     </button> 
 
    </td> 
 
    <td style="display:none"> 
 
     <button> 
 
     2 
 
     </button> 
 
    </td> 
 
    <td> 
 
     <button> 
 
     3 
 
     </button> 
 
    </td> 
 
    <td style="display:none"> 
 
     <button> 
 
     4 
 
     </button> 
 
    </td> 
 
    </tr> 
 
</table>

Hier ist ein Fiddle auch