檢查TD是最後一個可見TD

Question

我要檢查，如果當前網格單元是行中的最後一個可見細胞。

//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'); 

我如何檢查，看看是否所選小區是行的最後可見列？

我掛鉤到事件有以下幾點：

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


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

Answer 1

有最有可能做這件事然後在下面的方式更有效的方式，但它似乎工作，可以告訴你，如果你是在最後當前行的可見列。

考慮到你所提到display:none被用來隱藏你應該能檢查當前行中的電流td是最後一個可見td元素等欄目帳戶。

$('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>

這裏是一個Fiddle以及