jQuery: Obtiene la siguiente celda de la tabla verticalmente

Question

¿Cómo puedo usar jQuery para acceder a la celda (td) inmediatamente continuación una célula dada en un html rejilla diseño tradicional table (es decir, aquella en la que todas las células se extienden exactamente una fila y columna)?

sé que el siguiente configurará nextCell a la celda inmediatamente a la derecha de la celda se hace clic, ya que son los hermanos inmediatos, pero estoy tratando de recuperar la celda inmediatamente debajo de la celda se hace clic:

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

Preferiblemente me gustaría hacerlo sin ningún uso de clases o identificadores.

Answer 1

Prueba esto:

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

¿Hay un número igual de células en cada fila de la tabla? Si es así, puede obtener el "conteo" de la celda en cuestión, luego seleccione la celda correspondiente en el next('tr').

Answer 3

¿Qué tal:

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

Answer 4

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

index es el índice de base 0 de la celda en la fila actual (prevAll encuentra todas las células antes de éste)

Luego, en la siguiente fila, encontramos el td nth-child en el índice + 1 (nth-child comienza en 1, de ahí el + 1).

Answer 5

Si desea hacerlo sin el uso de selectores, que puede hacer:

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); 
     //... 
    }); 

No es que la eficiencia es importante aquí, pero funciona mucho más rápido que hacerlo de esta manera - en las pruebas de más de 100.000 iteraciones que era 2-5 veces más rápido que los enfoques basados ​​en el selector.