jQuery: получить следующую ячейку таблицы по вертикали

Как я могу использовать jQuery для доступа к ячейке (td) непосредственно под данной ячейкой в традиционной таблице html table grid-layout (т.е. Той, в которой все ячейки занимают ровно одну строку и столбец)?

Я знаю, что следующее будет устанавливать nextCell в ячейку прямо справа от щелкнутой ячейки, потому что они являются непосредственными братьями и сестрами, но я пытаюсь получить ячейку сразу под нажатой ячейкой:

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

Предпочтительно, я хотел бы сделать это без использования классов или идентификаторов.

Ответы

Ответ 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();
});

Ответ 2

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

index - это index на основе 0 ячейки в текущей строке (prevAll находит все ячейки до этого).

Затем в следующей строке мы найдем nth-child td с индексом + 1 (nth-child начинается с 1, а значит + 1).

Ответ 3

Как насчет:

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

Ответ 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 раз быстрее, чем подходы на основе селектора.

Ответ 5

Есть ли равное количество ячеек в каждой строке таблицы? Если это так, вы можете получить "счет" соответствующей ячейки, затем выберите соответствующую ячейку в next('tr').