Ottieni il contenuto di una riga della tabella con un clic del pulsante

Question

Ho bisogno di estrarre i dettagli di ogni colonna nella mia tabella. Ad esempio, colonna "Nome/Nr.".

• La tabella contiene un numero di indirizzi
• L'ultima colonna di ogni riga ha un pulsante che consente a un utente sceglie un indirizzo elencato.

Problema: Il mio codice raccoglie solo fino al primo <td> che ha una classe nr. Come faccio a far funzionare questo?

Ecco il 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 
}); 

Tabella:

<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> 

Answer 1

Lo scopo dell'esercizio è quello di trovare la riga che contiene le informazioni. Quando arriviamo, possiamo facilmente estrarre le informazioni richieste.

risposta

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

VIEW DEMO

Ora concentriamoci su alcune domande frequenti in tali situazioni.

Come trovare la riga più vicina?

Utilizzando .closest():

var $row = $(this).closest("tr"); 

Utilizzando .parent():

È anche possibile spostare l'albero del DOM utilizzando .parent() metodo. Questa è solo un'alternativa che a volte viene utilizzata insieme a .prev() e .next().

var $row = $(this).parent()    // Moves up from <button> to <td> 
        .parent();   // Moves up from <td> to <tr> 

Ottenere tutto cella di una tabella <td> Valori

Così abbiamo la nostra $row e vorremmo output di testo cella di una tabella:

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

VIEW DEMO

Ottenere uno specifico valore

Simile al precedente, tuttavia è possibile specificare l'indice dell'elemento figlio <td>.

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

VIEW DEMO

metodi utili

• .closest() - ottenere il primo elemento che corrisponde al selettore di
• .parent() - ottenere il padre di ogni elemento nel set corrente di elementi abbinati
• .parents() - ottenere gli antenati di ogni elemento del set corrente di elementi abbinati
• .children() - ottenere i figli di ogni elemento della serie di elementi abbinati
• .siblings() - ottenere i fratelli di ogni elemento del set di corrispondenza elementi
• .find() - ottenere i discendenti di ciascun elemento della attuale serie di elementi accoppiati
• .next() - ottenere immediatamente successivo fratelli di ciascun elemento del complesso di elementi corrispondenti
• .prev() - ottieni il fratello immediatamente precedente di ogni elemento nel set di elementi abbinati

Answer 2

Prova questo:

$(".use-address").click(function() { 
    $(this).closest('tr').find('td').each(function() { 
     var textval = $(this).text(); // this will be the text of each <td> 
    }); 
}); 

Ciò trovare il più vicino tr (salendo thro ugh the DOM) del pulsante attualmente cliccato e quindi loop ogni td - potresti voler creare una stringa/array con i valori.

Example here

Getting the full address using an array example here

Answer 3

È necessario modificare il codice per trovare la riga relativa al pulsante che è stato cliccato. Prova questo:

$(".use-address").click(function() { 
    var id = $(this).closest("tr").find(".nr").text(); 
    $("#resultas").append(id); 
}); 

Example fiddle

Answer 4

Il selettore ".nr:first" è specificamente alla ricerca per la prima, e solo il primo elemento avente classe "nr" all'interno dell'elemento tabella selezionata. Se invece chiami .find(".nr") otterrai tutti gli elementi all'interno della tabella con classe "nr". Una volta che hai tutti questi elementi, puoi usare il metodo .each per iterare su di essi. Per esempio:

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

tuttavia, che sarebbe farti tutte degli td.nr elementi nella tabella, non solo quello nella riga che è stato cliccato. Per limitare ulteriormente la selezione per la riga contenente il pulsante cliccato, utilizzare il metodo .closest, in questo modo:

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

Answer 5

 

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

poi sul pulsante:

onclick="useAdress()"