jQuery：垂直获取下一个表格单元格

Question

如何在传统的网格布局html table使用jQuery直接访问给定单元格下方的单元格（ td ）（即，所有单元格恰好跨越一行和一列）？

我知道以下内容将nextCell设置为单击单元格右侧的单元格，因为它们是直接兄弟，但我正在尝试检索单击单元格下方的单元格：

$('td').click(function () {
    var nextCell = $(this).next('td');
});

我最好不要使用类或ID。

Answer 1

试试这个：

$("td").click(function(){
  // cache $(this);
  var $this = $(this);

  // First, get the index of the td.
  var cellIndex = $this.index();

  // next, get the cell in the next row that has
  // the same index.
  $this.closest('tr').next().children().eq(cellIndex).doSomething();
});

Answer 2

$('td').click(function () {
  var index = $(this).prevAll().length
  var cellBelow = $(this).parent().next('tr').children('td:nth-child(' + (index + 1) + ')')
});

index是当前行中单元格的从0开始的索引（ prevAll在此之前查找所有单元格）。

然后在下一行中，我们在索引+ 1处找到nth-child td（ nth-child从1开始，因此+ 1 ）。

Answer 3

怎么样：

$('td').click(function () {
    var nextCell = $(this).parent().next().find("td:nth-child(whatever)");
});

Answer 4

如果你想在不使用选择器的情况下这样做，你可以这样做：

    function getNextCellVertically(htmlCell){
        //find position of this cell..
        var $row = $(htmlCell).parent();
        var cellIndex = $.inArray(htmlCell, $row[0].cells);
        var table = $row.parent()[0];
        var rowIndex = $.inArray($row[0], table.rows);

        //get the next cell vertically..
        return (rowIndex < table.rows.length-1) ? 
                table.rows[rowIndex+1].cells[cellIndex] : undefined;
    }

    $('td').click(function () {
        var nextCell = getNextCellVertically(htmlCell);
        //...
    });

并不是说效率在这里很重要，但它的运行速度要快得多 - 在100,000次迭代测试中，它比基于选择器的方法快2-5倍。

Answer 5

每个表行中是否有相同数量的单元格？ 如果是这样，您可以得到相关单元格的“计数”，然后next('tr')选择相应的单元格。