javascript - 检查 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还有