jQuery-Selektor zum Abrufen von Zellen in derselben Spalte

Question

Bei einer mehrzeiligen, mehrspaltigen Tabelle, wie kann ich alle Zellen in derselben Spalte als beliebige Zelle (z. B. eine Zelle, auf die geklickt wird) auswählen.

Etwas wie:

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

Ich muss dies tun, ohne die Spalten einzeln zu benennen. Z.B. Es sollte auf einfache generische table Markup ohne zusätzliche Klassen oder IDs funktionieren.

Answer 1

Ihr Versuch richtig ist, alles, was Sie tun müssen, ist .index verwenden die Spaltennummer-den Index der <td> innerhalb der Reihe zu finden. Sie müssen auch nth-child-selector verwenden, um die Spaltenindizes der anderen Elemente <td> anzupassen.

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

Answer 2

Dies kann mit der Methode jQuery eq durchgeführt werden.

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"); 
}); 

Nicht sicher, ob dies der effizienteste Weg ist, dies zu tun, aber es ist die Lösung kam ich mit, wenn sie mit dem gleichen Problem vor einiger Zeit konfrontiert.

Referenz

jQuery.eq