Question

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

我知道以下内容会将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')中选择相应的单元格。

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

5 个答案: