Muszę wyodrębnić szczegóły każdej kolumny w mojej tabeli. Na przykład kolumna „Nazwa / nr.”.
- Tabela zawiera kilka adresów
- W ostatniej kolumnie każdego wiersza znajduje się przycisk, który umożliwia użytkownikowi wybranie adresu z listy.
Problem: mój kod odbiera tylko pierwszy, <td>
który ma klasę nr
. Jak to działa?
Oto bit jQuery:
$(".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
});
Stół:
<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
źródło
źródło
Odpowiedzi:
Celem ćwiczenia jest znalezienie wiersza zawierającego informacje. Kiedy tam dotrzemy, możemy łatwo wydobyć wymagane informacje.
Odpowiedź
$(".use-address").click(function() { var $item = $(this).closest("tr") // Finds the closest row <tr> .find(".nr") // Gets a descendent with class="nr" .text(); // Retrieves the text within <td> $("#resultas").append($item); // Outputs the answer });
ZOBACZ DEMO
Skoncentrujmy się teraz na kilku często zadawanych pytaniach w takich sytuacjach.
Jak znaleźć najbliższy wiersz?
Używając
.closest()
:var $row = $(this).closest("tr");
Używając
.parent()
:Możesz także przesunąć drzewo DOM w górę za pomocą
.parent()
metody. To tylko alternatywa, która jest czasami używana razem z.prev()
i.next()
.var $row = $(this).parent() // Moves up from <button> to <td> .parent(); // Moves up from <td> to <tr>
Pobieranie wszystkich
<td>
wartości komórek tabeliMamy więc nasz
$row
i chcielibyśmy wyprowadzić tekst komórki tabeli:var $row = $(this).closest("tr"), // Finds the closest row <tr> $tds = $row.find("td"); // Finds all children <td> elements $.each($tds, function() { // Visits every single <td> element console.log($(this).text()); // Prints out the text within the <td> });
ZOBACZ DEMO
Uzyskanie określonej
<td>
wartościPodobnie jak w poprzednim, możemy jednak określić indeks
<td>
elementu potomnego .var $row = $(this).closest("tr"), // Finds the closest row <tr> $tds = $row.find("td:nth-child(2)"); // Finds the 2nd <td> element $.each($tds, function() { // Visits every single <td> element console.log($(this).text()); // Prints out the text within the <td> });
ZOBACZ DEMO
Przydatne metody
.closest()
- pobierz pierwszy element, który pasuje do selektora.parent()
- pobierz rodzica każdego elementu w bieżącym zestawie dopasowanych elementów.parents()
- pobierz przodków każdego elementu w bieżącym zestawie dopasowanych elementów.children()
- pobierz dzieci każdego elementu w zestawie dopasowanych elementów.siblings()
- pobierz rodzeństwo każdego elementu w zestawie dopasowanych elementów.find()
- pobierz potomków każdego elementu w bieżącym zestawie dopasowanych elementów.next()
- pobierz bezpośrednio następujące rodzeństwo każdego elementu w zestawie dopasowanych elementów.prev()
- pobierz bezpośrednio poprzedzający element równorzędny każdego elementu w zestawie dopasowanych elementówźródło
Spróbuj tego:
$(".use-address").click(function() { $(this).closest('tr').find('td').each(function() { var textval = $(this).text(); // this will be the text of each <td> }); });
To znajdzie najbliższy
tr
(przechodząc w górę przez DOM) aktualnie klikniętego przycisku, a następnie zapętli każdy z nichtd
- możesz chcieć utworzyć ciąg / tablicę z wartościami.Przykład tutaj
Pobieranie pełnego adresu na przykładzie tablicy tutaj
źródło
Musisz zmienić kod, aby znaleźć wiersz odpowiadający przyciskowi, który został kliknięty. Spróbuj tego:
$(".use-address").click(function() { var id = $(this).closest("tr").find(".nr").text(); $("#resultas").append(id); });
Przykładowe skrzypce
źródło
function useAdress () { var id = $("#choose-address-table").find(".nr:first").text(); alert (id); $("#resultas").append(id); // Testing: append the contents of the td to a div };
następnie na twoim przycisku:
onclick="useAdress()"
źródło
Selektor
".nr:first"
szuka w szczególności pierwszego i tylko pierwszego elementu mającego klasę"nr"
w wybranym elemencie tabeli. Jeśli zamiast tego zadzwonisz.find(".nr")
, otrzymasz wszystkie elementy w tabeli mające klasę"nr"
. Gdy masz już wszystkie te elementy, możesz użyć metody .each do ich iteracji. Na przykład:$(".use-address").click(function() { $("#choose-address-table").find(".nr").each(function(i, nrElt) { var id = nrElt.text(); $("#resultas").append("<p>" + id + "</p>"); // Testing: append the contents of the td to a div }); });
Jednak, że można dostać wszystko z
td.nr
elementów w tabeli, a nie tylko jeden w wierszu, który został kliknięty. Aby dodatkowo ograniczyć wybór do wiersza zawierającego kliknięty przycisk, użyj metody .closest , na przykład:$(".use-address").click(function() { $(this).closest("tr").find(".nr").each(function(i, nrElt) { var id = nrElt.text(); $("#resultas").append("<p>" + id + "</p>"); // Testing: append the contents of the td to a div }); });
źródło
Znajdź element z identyfikatorem w wierszu za pomocą jquery
$(document).ready(function () { $("button").click(function() { //find content of different elements inside a row. var nameTxt = $(this).closest('tr').find('.name').text(); var emailTxt = $(this).closest('tr').find('.email').text(); //assign above variables text1,text2 values to other elements. $("#name").val( nameTxt ); $("#email").val( emailTxt ); }); });
źródło
var values = []; var count = 0; $("#tblName").on("click", "tbody tr", function (event) { $(this).find("td").each(function () { values[count] = $(this).text(); count++; }); });
Teraz tablica wartości zawiera wszystkie wartości komórek z tego wiersza, które mogą być używane jako wartości [0] wartość pierwszej komórki w klikniętym wierszu
źródło
Oto pełny kod prostego przykładu delegata
źródło