jQuery: Get cella successiva tabella verticalmente

Question

Come posso usare jQuery per accedere alla cella (td) immediatamente sotto una data cella in un tradizionale html griglia layout table (cioè, in cui tutte le cellule estendono esattamente una riga e colonna)?

So che la segue imposta nextCell alla cella immediatamente a destra della cella cliccato perché sono fratelli immediati, ma sto cercando di recuperare il cellulare immediatamente sotto la cella cliccato:

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

Preferibilmente mi piacerebbe farlo senza alcun uso di classi o id.

Answer 1

Prova questo:

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

C'è un numero uguale di celle in ogni riga della tabella? In tal caso, è possibile ottenere il "conteggio" della cella in questione, quindi selezionare la cella corrispondente in next('tr').

Answer 3

ne dite:

$('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 è l'indice 0-based della cella della riga corrente (prevAll trova tutte le celle prima di questo).

Quindi nella riga successiva, troviamo il nth-child td all'indice + 1 (nth-child inizia da 1, quindi + 1).

Answer 5

Se si vuole fare senza usare i selettori, si può fare:

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

Non che l'efficienza è importante qui, ma funziona molto più veloce per farlo in questo modo - nei test oltre 100.000 iterazioni Era 2-5 volte più veloce degli approcci basati sul selettore.