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

Devo 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 di scegliere un indirizzo elencato.

Problema: il mio codice preleva solo il primo

che ha un codice di class. 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 }); 

Tavolo:

 
Name/Nr. Street Town Postcode Country Options
50 Some Street 1 Leeds L0 0XX United Kingdom
49 Some Street 2 Lancaster L0 0XX United Kingdom

Lo scopo dell’esercizio è 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  .find(".nr") // Gets a descendent with class="nr" .text(); // Retrieves the text within  $("#resultas").append($item); // Outputs the answer }); 

VISUALIZZA 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() :

Puoi anche spostare l’albero DOM usando il metodo .parent() . Questa è solo un’alternativa che a volte viene usata insieme a .prev() e .next() .

 var $row = $(this).parent() // Moves up from  

Ottenere tutti i valori

tabella della tabella

Quindi abbiamo la nostra $row e vorremmo pubblicare il testo della cella della tabella:

 var $row = $(this).closest("tr"), // Finds the closest row  $tds = $row.find("td"); // Finds all children  elements $.each($tds, function() { // Visits every single  element console.log($(this).text()); // Prints out the text within the  }); 

VISUALIZZA DEMO

Ottenere un valore

specifico

Simile al precedente, tuttavia possiamo specificare l’indice dell’elemento

figlio.

 var $row = $(this).closest("tr"), // Finds the closest row  $tds = $row.find("td:nth-child(2)"); // Finds the 2nd  element $.each($tds, function() { // Visits every single  element console.log($(this).text()); // Prints out the text within the  }); 

VISUALIZZA DEMO

Metodi utili

  • .closest() – ottiene il primo elemento che corrisponde al selettore
  • .parent() – ottiene il genitore di ogni elemento nel set corrente di elementi corrispondenti
  • .parents() – ottiene gli antenati di ogni elemento nel set corrente di elementi corrispondenti
  • .children() – ottiene i figli di ogni elemento nel set di elementi corrispondenti
  • .siblings() – ottiene i fratelli di ogni elemento nel set di elementi corrispondenti
  • .find() – ottiene i discendenti di ogni elemento nel set corrente di elementi corrispondenti
  • .next() : ottiene il fratello immediatamente successivo di ciascun elemento nel set di elementi corrispondenti
  • .prev() – ottiene il fratello immediatamente precedente di ciascun elemento nel set di elementi corrispondenti

Prova questo:

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

Questo troverà il tr più vicino (risalendo attraverso il DOM) del pulsante attualmente cliccato e quindi eseguirà un ciclo su ogni td – potresti voler creare una stringa / array con i valori.

Esempio qui

Ottenere l’indirizzo completo usando un esempio di array qui

È necessario modificare il codice per trovare la riga relativa al pulsante su cui è stato fatto clic. Prova questo:

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

Esempio di violino

Il selettore ".nr:first" cerca specificamente il primo, e solo il primo, elemento che ha la class "nr" all’interno dell’elemento di tabella selezionato. Se invece chiami .find(".nr") otterrai tutti gli elementi all’interno della tabella che hanno la class "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("

" + id + "

"); // Testing: append the contents of the td to a div }); });

Tuttavia, questo ti porterà tutti gli elementi td.nr nella tabella, non solo quello nella riga su cui è stato fatto clic. Per limitare ulteriormente la selezione alla 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("

" + id + "

"); // Testing: append the contents of the td to a div }); });

     function useAdress () { 
     var id = $ ("# choose-address-table"). find (". nr: first"). text ();
     avviso (id);
     . $ ( "#" Resultas) accodare (id);  // Test: aggiungi il contenuto del td a un div
     };

quindi sul tuo pulsante:

 onclick="useAdress()" 

Trova l’elemento con id in fila usando 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 ); }); }); 
 var values = []; var count = 0; $("#tblName").on("click", "tbody tr", function (event) { $(this).find("td").each(function () { values[count] = $(this).text(); count++; }); }); 

Ora l’array di valori contiene tutti i valori di cella di quella riga può essere usato come valore [0] valore della prima cella della riga cliccata

Ecco il codice completo per un semplice esempio di delegato

 < !DOCTYPE html>   Bootstrap Example        

Striped Rows

The .table-striped class adds zebra-stripes to a table:

Firstname Lastname Email
John Doe john@example.com click
Mary Moe mary@example.com click
July Dooley july@example.com click