web-dev-qa-db-fra.com

Obtenez le contenu d'une ligne de la table en cliquant sur un bouton

Je dois extraire les détails de chaque colonne de mon tableau. Par exemple, la colonne "Nom/Nr.".

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

Problème: Mon code ne récupère que le premier <td> ayant une classe nr. Comment puis-je obtenir 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>
javascriptjquerybuttononclickhtml-table
60
chuckfinley

L’exercice a pour but de trouver la ligne contenant les informations. Lorsque nous y arrivons, nous pouvons facilement extraire les informations requises.

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

Passons maintenant aux questions fréquemment posées dans de telles situations.

Comment trouver la rangée la plus proche?

Utilisation de .closest():

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

Utilisation de .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>

Obtention de toutes les valeurs de la cellule <td> du tableau

Nous avons donc notre $row et 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>
});

VIEW DEMO

Obtenir une valeur <td> spécifique

Semblable au précédent, nous pouvons toutefois spécifier l’index de l’élément enfant <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

Méthodes utiles

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

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

Ceci trouvera la tr (remontant dans le DOM) la plus proche du bouton sur lequel vous avez cliqué, puis bouclez chaque 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
ManseUK

Vous devez changer votre code pour trouver la ligne par rapport 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

8
Rory McCrossan
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()"
1
cody collicott

Le sélecteur ".nr:first" recherche spécifiquement le premier et le seul é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 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 donnerait tous des éléments td.nr de 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 la méthode .closest , 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
    });
});
1
dgvid

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>[email protected]</td>
        <td>click</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>[email protected]</td>
        <td>click</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>[email protected]</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>
0
ankush
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 valeurs [0] première valeur de cellule de la ligne cliquée

0
Muhammad Waqas Aziz

Trouver un élément avec id dans une 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
Super Model