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 à un utilisateur de choisir une adresse répertoriée.

Problème: mon code ne capte que le premier <td>qui a une classe nr. Comment faire fonctionner cela?

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>

Le but de l'exercice est de trouver la ligne qui contient 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

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

Comment trouver la ligne la plus proche?

Utilisation .closest():

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

Utilisation .parent():

Vous pouvez également remonter dans l'arborescence DOM à l'aide de .parent()method. 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 <td>valeurs de cellule du tableau

Nous avons donc notre $rowet nous aimerions afficher le texte de la cellule 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>
});

VOIR LA DÉMO

Obtenir une <td>valeur spécifique

Semblable au précédent, nous pouvons toutefois spécifier l'index de l' <td>élément enfant .

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() - récupère le premier élément qui correspond au sélecteur
• .parent() - obtenir le parent de chaque élément dans l'ensemble actuel des éléments correspondants
• .parents() - obtenir les ancêtres de chaque élément dans l'ensemble courant d'éléments correspondants
• .children() - obtenir 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() - obtenir les descendants de chaque élément dans l'ensemble actuel des éléments correspondants
• .next() - obtenir le frère immédiatement suivant de chaque élément dans l'ensemble des éléments correspondants
• .prev() - obtenir le frère immédiatement précédent de chaque élément de l'ensemble des éléments correspondants

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 trbouton le plus proche (en remontant dans le DOM) du bouton actuellement cliqué, puis en boucle chacun td- vous voudrez peut-être créer une chaîne / tableau avec les valeurs.

Exemple ici

Obtenir l'adresse complète à l'aide d'un exemple de tableau ici

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

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()"

Le sélecteur ".nr:first"recherche spécifiquement le premier, et uniquement le premier, élément ayant une classe "nr"dans l'élément de table sélectionné. Si vous appelez à la place, .find(".nr")vous obtiendrez tous les éléments de la table ayant la classe "nr". Une fois que vous avez tous ces éléments, vous pouvez utiliser la méthode .each pour les parcourir. 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 permettrait d'obtenir tous les td.nréléments du tableau, pas seulement celui de la ligne sur laquelle l'utilisateur a cliqué. Pour limiter davantage votre sélection à la ligne contenant le bouton cliqué, utilisez la méthode .closest , comme ceci:

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

Rechercher l'élément avec l'ID dans la ligne en utilisant 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++;
    });
});

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

Voici le code complet pour un exemple simple de délégué

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>
<body>

<div class="container">
  <h2>Striped Rows</h2>
  <p>The .table-striped class adds zebra-stripes to a table:</p>            
  <table class="table table-striped">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>

      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
        <td>click</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
        <td>click</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
        <td>click</td>
      </tr>

    </tbody>
  </table>
  <script>
  $(document).ready(function(){
  $("div").delegate("table tbody tr td:nth-child(4)", "click", function(){
  var $row = $(this).closest("tr"),        // Finds the closest row <tr> 
    $tds = $row.find("td:nth-child(2)");
     $.each($tds, function() {
        console.log($(this).text());
        var x = $(this).text();
        alert(x);
    });
    });
});
  </script>
</div>

</body>
</html>