jQuery selector per afferrare le celle nella stessa colonna

Question

Dato una tabella a più colonne, come posso selezionare tutte le celle nella stessa colonna come qualsiasi cella arbitraria (ad esempio una cella su cui si fa clic).

Qualcosa di simile:

$("td").click(function(){ 
    var columnNo = $(this).columnNo? 
    $(this).closest("table").find("tr td:eq("+columnNo+")").css("color", "red"); 
}); 

ho bisogno di fare questo senza nominare le colonne singolarmente. Per esempio. dovrebbe funzionare sul semplice markup generico table senza classi o ID aggiuntivi.

Answer 1

Il tentativo è giusto, tutto quello che dovete fare è usare .index per trovare la colonna del numero-indice del <td> all'interno della riga. È inoltre necessario utilizzare nth-child-selector per abbinare gli indici delle colonne degli altri elementi <td>.

$("td").click(function(){ 
    var columnNo = $(this).index(); 
    $(this).closest("table") 
     .find("tr td:nth-child(" + (columnNo+1) + ")") 
     .css("color", "red"); 
}); 

Answer 2

Questo può essere fatto utilizzando il metodo jQuery eq.

var $tds = $("td"); // get all tds beforehand, so jquery doesn't 
        // need to hit the DOM every click 

$("td").on("click", function() { 
    var position = $(this).index(), 
     $tdsInColumn = $tds.filter(":nth-child(" + index + ")"); 

    // manipulate $tdsInColumn in any way 
    $tdsInColumn.addClass("selected"); 
}); 

Non sono sicuro se questo è il modo più efficiente di farlo, ma è la soluzione mi è venuta di fronte lo stesso problema un po 'indietro.

Riferimento

jQuery.eq