Ich muss die Details jeder Spalte in meiner Tabelle extrahieren. Zum Beispiel Spalte "Name / Nr.".
- Die Tabelle enthält eine Reihe von Adressen
- Die allerletzte Spalte jeder Zeile enthält eine Schaltfläche, mit der ein Benutzer eine aufgelistete Adresse auswählen kann.
Problem: Mein Code nimmt nur den ersten auf <td>
, der eine Klasse hat nr
. Wie bringe ich das zum Laufen?
Hier ist das jQuery-Bit:
$(".use-address").click(function() {
var id = $("#choose-address-table").find(".nr:first").text();
$("#resultas").append(id); // Testing: append the contents of the td to a div
});
Tabelle:
<table id="choose-address-table" class="ui-widget ui-widget-content">
<thead>
<tr class="ui-widget-header ">
<th>Name/Nr.</th>
<th>Street</th>
<th>Town</th>
<th>Postcode</th>
<th>Country</th>
<th>Options</th>
</tr>
</thead>
<tbody>
<tr>
<td class="nr"><span>50</span>
</td>
<td>Some Street 1</td>
<td>Leeds</td>
<td>L0 0XX</td>
<td>United Kingdom</td>
<td>
<button type="button" class="use-address" />
</td>
</tr>
<tr>
<td class="nr">49</td>
<td>Some Street 2</td>
<td>Lancaster</td>
<td>L0 0XX</td>
<td>United Kingdom</td>
<td>
<button type="button" class="use-address" />
</td>
</tr>
</tbody>
</table>
javascript
jquery
button
onclick
html-table
Chuckfinley
quelle
quelle
Antworten:
Ziel der Übung ist es, die Zeile zu finden, die die Informationen enthält. Wenn wir dort ankommen, können wir leicht die erforderlichen Informationen extrahieren.
Antworten
DEMO ANZEIGEN
Konzentrieren wir uns nun auf einige häufig gestellte Fragen in solchen Situationen.
Wie finde ich die nächste Reihe?
Verwenden von
.closest()
:Verwenden von
.parent()
:Sie können den DOM-Baum auch mithilfe der
.parent()
Methode nach oben verschieben. Dies ist nur eine Alternative, die manchmal zusammen mit.prev()
und verwendet wird.next()
.Erste alle
<td>
TabellenzellenwerteWir haben also unseren
$row
und möchten Tabellenzellentext ausgeben:DEMO ANZEIGEN
Einen bestimmten
<td>
Wert erhaltenÄhnlich wie beim vorherigen können wir jedoch den Index des untergeordneten
<td>
Elements angeben .DEMO ANZEIGEN
Nützliche Methoden
.closest()
- Holen Sie sich das erste Element, das dem Selektor entspricht.parent()
- Holen Sie sich das übergeordnete Element jedes Elements in den aktuellen Satz übereinstimmender Elemente.parents()
- Holen Sie sich die Vorfahren jedes Elements in den aktuellen Satz übereinstimmender Elemente.children()
- Holen Sie sich die untergeordneten Elemente jedes Elements in den Satz übereinstimmender Elemente.siblings()
- Holen Sie sich die Geschwister jedes Elements in den Satz der übereinstimmenden Elemente.find()
- Holen Sie sich die Nachkommen jedes Elements in den aktuellen Satz übereinstimmender Elemente.next()
- Holen Sie sich das unmittelbar folgende Geschwister jedes Elements aus dem Satz übereinstimmender Elemente.prev()
- Holen Sie sich das unmittelbar vorhergehende Geschwister jedes Elements aus dem Satz übereinstimmender Elementequelle
Versuche dies:
Dadurch wird der nächstgelegene
tr
(durch das DOM gehende) der aktuell angeklickten Schaltfläche gefunden und anschließend jeweils eine Schleife erstellt.td
Möglicherweise möchten Sie eine Zeichenfolge / ein Array mit den Werten erstellen.Beispiel hier
Abrufen der vollständigen Adresse anhand eines Array-Beispiels hier
quelle
Sie müssen Ihren Code ändern, um die Zeile relativ zu der Schaltfläche zu finden, auf die geklickt wurde. Versuche dies:
Beispiel Geige
quelle
dann auf deinen Knopf:
quelle
Der Selektor
".nr:first"
sucht speziell nach dem ersten und nur dem ersten Element mit einer Klasse"nr"
innerhalb des ausgewählten Tabellenelements. Wenn Sie stattdessen aufrufen, erhalten.find(".nr")
Sie alle Elemente in der Tabelle mit Klasse"nr"
. Sobald Sie alle diese Elemente haben, können Sie die .each- Methode verwenden, um sie zu durchlaufen . Beispielsweise:Das würde Sie jedoch erhält alle der
td.nr
Elemente in der Tabelle, nicht nur die in der Reihe , die geklickt wurde. Um Ihre Auswahl weiter auf die Zeile zu beschränken, die die angeklickte Schaltfläche enthält, verwenden Sie die .closest- Methode wie folgt :quelle
Suchen Sie mit jquery ein Element mit der ID in der Zeile
quelle
Jetzt enthält das Wertearray alle Zellenwerte dieser Zeile. Es kann wie der erste Zellenwert der angeklickten Zeile verwendet werden
quelle
Hier ist der vollständige Code für ein einfaches Beispiel für einen Delegaten
quelle