Obtenir le contenu d'une ligne de tableau par un clic sur un bouton

Question

J'ai besoin d'extraire les détails de chaque colonne de mon tableau. Par exemple, la colonne "Nom/N°".

• Le tableau contient un certain nombre d'adresses
• La toute dernière colonne de chaque ligne comporte un bouton qui permet à l'utilisateur de choisir une adresse répertoriée.

Problème : Mon code ne prend en compte que le premier <td> qui a une classe nr . Comment faire pour que cela fonctionne ?

Voici la partie 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
});

Table :

<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

Le but de l'exercice est de trouver la ligne qui contient l'information. Lorsque nous y parvenons, nous pouvons facilement extraire l'information requise.

Réponse :

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

Concentrons-nous maintenant sur certaines questions fréquemment posées dans de telles situations.

Comment trouver la ligne la plus proche ?

Utilisation de .closest() :

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

Utilisation de .parent() :

Vous pouvez également vous déplacer vers le haut de l'arbre DOM en utilisant .parent() méthode. Il s'agit juste d'une alternative qui est parfois utilisée avec .prev() y .next() .

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

Récupérer toutes les cellules d'un tableau <td> valeurs

Nous avons donc notre $row et nous voudrions sortir le texte des cellules du tableau :

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

Obtenir une information spécifique <td> valeur

Similaire à la précédente, cependant nous pouvons spécifier l'index de l'enfant <td> élément.

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

Méthodes utiles

• .closest() - obtenir le premier élément qui correspond au sélecteur
• .parent() - obtenir le parent de chaque élément dans l'ensemble actuel d'éléments appariés
• .parents() - obtenir les ancêtres de chaque élément dans l'ensemble actuel d'éléments appariés
• .children() - obtenir les enfants de chaque élément dans l'ensemble d'éléments appariés
• .siblings() - obtenir les frères et sœurs de chaque élément dans l'ensemble des éléments appariés
• .find() - obtenir les descendants de chaque élément dans l'ensemble actuel d'éléments appariés
• .next() - obtenir le frère ou la sœur immédiatement suivant(e) de chaque élément dans l'ensemble d'éléments appariés
• .prev() - obtenir le frère ou la sœur immédiatement précédent(e) de chaque élément dans l'ensemble d'éléments appariés

Answer 2

Vous devez modifier votre code pour trouver la ligne relative au bouton qui a été cliqué. Essayez ceci :

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

Exemple de violon

Answer 3

Essayez ça :

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

Cela permettra de trouver le plus proche tr (en remontant dans le DOM) du bouton actuellement cliqué puis de boucler chaque td - vous pourriez vouloir créer une chaîne / un tableau avec les valeurs.

Exemple ici

Obtenir l'adresse complète en utilisant un tableau, par exemple ici

Answer 4

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

puis sur votre bouton :

onclick="useAdress()"

Answer 5

Le sélecteur ".nr:first" recherche spécifiquement le premier, et seulement le premier, élément ayant la classe "nr" dans l'élément de tableau sélectionné. Si vous appelez plutôt .find(".nr") vous obtiendrez tous les éléments du tableau ayant la classe "nr" . Une fois que vous avez tous ces éléments, vous pouvez utiliser la fonction .chacun pour les faire défiler. Par exemple :

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

Cependant, cela vous amènerait todos de la td.nr dans le tableau, et pas seulement celui de la ligne sur laquelle on a cliqué. Pour limiter davantage votre sélection à la ligne contenant le bouton cliqué, utilisez l'option .le plus proche comme suit :

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