Question Cliquez sur le bouton pour obtenir le contenu d'une ligne de tableau


Je dois extraire les détails de chaque colonne de ma table. Par exemple, colonne "Nom / Nr.".

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

Problème: Mon code ne prend que le premier <td> qui a une classe nr. Comment puis-je que cela fonctionne?

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

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>

50
2018-01-22 14:05


origine


Réponses:


L'objet de l'exercice est de trouver la ligne contenant les informations. Lorsque nous y arrivons, nous pouvons facilement extraire les informations requises.

Répondre

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

VOIR LA DÉMO

Maintenant, concentrons-nous sur certaines questions fréquemment posées dans de telles situations.

Comment trouver la rangée la plus proche?

En utilisant .closest():

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

En utilisant .parent():

Vous pouvez également déplacer l’arbre DOM en utilisant .parent() méthode. Ceci est juste une alternative qui est parfois utilisée avec .prev() et .next().

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

Obtenir toutes les cellules de la table <td> valeurs

Nous avons donc notre $row et nous voudrions sortir le texte de cellule de 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>
});

VOIR LA DÉMO

Obtenir un spécifique <td> valeur

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

VOIR LA DÉMO

Méthodes utiles

  • .closest() - obtenir le premier élément qui correspond au sélecteur
  • .parent() - récupérer le parent de chaque élément dans l'ensemble d'éléments correspondant
  • .parents() - récupérer les ancêtres de chaque élément dans le jeu d'éléments correspondant
  • .children() - récupérer les enfants de chaque élément dans l’ensemble des éléments correspondants
  • .siblings() - obtenir les frères et sœurs de chaque élément dans l'ensemble des éléments correspondants
  • .find() - récupérer les descendants de chaque élément dans l'ensemble d'éléments correspondant
  • .next() - obtenir le frère immédiatement suivant de chaque élément de l'ensemble d'éléments correspondants
  • .prev() - obtenir le frère immédiatement précédent de chaque élément dans l'ensemble des éléments correspondants

175
2018-05-11 10:05



Essaye ç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 trouvera le plus proche tr (en remontant dans le DOM) du bouton actuellement cliqué puis en boucle chacun td - Vous pouvez créer une chaîne / un tableau avec les valeurs.

Exemple ici

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


8
2018-01-22 14:09



Vous devez changer votre code pour trouver la ligne relative au bouton sur lequel vous avez cliqué. Essaye ça:

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

Exemple de violon


7
2018-01-22 14:09



Le sélecteur ".nr:first" cherche spécifiquement le premier élément, et le premier seulement, ayant un cours "nr" dans l'élément de la table sélectionnée. Si vous appelez à la place .find(".nr") vous aurez tous les éléments dans la table ayant la classe "nr". Une fois que vous avez tous ces éléments, vous pouvez utiliser le .chaque méthode pour itérer sur eux. 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 tout du td.nr éléments dans la table, pas seulement celui de la ligne sur laquelle vous avez cliqué. Pour limiter davantage votre sélection à la ligne contenant le bouton cliqué, utilisez le .le plus proche méthode, comme ça:

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

1
2018-01-22 14:14




    function useAdress () {
    var id = $ ("# choose-address-table"). find (". nr: first"). text ();
    alerte (identifiant);
    $ ("# resultas"). append (id); // Test: ajoute le contenu du td à un div
    };

puis sur votre bouton:

onclick="useAdress()"


1
2018-01-22 14:18



Rechercher un élément avec un identifiant en ligne à l'aide de 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 );
    });
});

0
2018-05-10 11:00



var values = [];
var count = 0;
$("#tblName").on("click", "tbody tr", function (event) {
   $(this).find("td").each(function () {
       values[count] = $(this).text();
       count++;
    });
});

Maintenant, le tableau de valeurs contient toutes les valeurs de cellule de cette ligne peut être utilisé comme des valeurs [0] première valeur de cellule de la ligne cliquée


0
2017-07-28 07:15