Wie wählt man eine Zeile in der Tabelle mit jquery?

Question

Ich habe eine Tabelle in meiner Anwendung erstellt, ich möchte die gesamte Zeile auswählen (Hintergrundfarbe ändern), wenn Sie auf ein Kontrollkästchen klicken, genauso wie Google Mail. Wenn wir in gmail auf checkbox klicken, wird die ganze Zeile gelb.

<table> 
<tbody> 
<tr> 
<td><input type="checkbox" name="chk" id="chk" /></td> 
<td>My Name</td> 
<td>Description of the job</td> 
</tr> 
</tbody> 
</table> 

Bitte sagen Sie mir, wie Sie das gleiche in jquery tun?

Answer 1

$(function() { 
    $("#chk").click(function() { 
    $(this).parents("tr").toggleClass("diffColor"); 
    }); 
}); 

eine CSS-Klasse erstellen (so genannte "diffColor" oben) und fügen Sie die Hintergrundfarbe, die Art und Weise, so etwas wie:

<style type="text/css"> 
tr.diffColor td { background-color: yellow; } 
</style> 

Sie CSS-Attribute nicht direkt festgelegt. Verwenden Sie Klassen wo möglich.

Answer 2

Cletus Antwort ist richtig, aber ich denke, kann ein wenig verbessert werden:

$(function() { 
    $("#chk").click(function() { 
     $(this) 
      .parents("tr:first") 
      .toggleClass("diffColor", this.checked) 
     ; 
    }); 
}); 

Die einzige wirkliche Unterschiede hier:

1. , dass es nur die <tr>erste Elternteil wählt. ... Sie wissen nie, wo Ihr Code enden könnte, und theoretisch wird es ein paar Ticks schneller sein.
2. überprüft es den neuen Wert des Kontrollkästchens und fügt die Klasse nach Bedarf hinzu oder entfernt sie. Ohne dies zu überprüfen, könnte ein anderer Code die "diffColour" -Klasse in der Zeile ändern und dann würde Ihr Kontrollkästchen invertiert werden, wenn Sie wissen, was ich meine.

Auch könnten Sie auch die Funktion zum change Handler Bindung:

$('#chk').bind('click change', function() { // ... etc 

Answer 3

Für Tabellenzeilen der Auswahl können Sie eine einfache Klasse, die ich TableRowSelector genannt geschrieben habe. Überprüfen Sie das Beispiel und den Beispielcode here