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

Question

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

Demandé el 22 de Janvier, 2013: Quand la question a-t-elle été
500394 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la 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>

Demandé el 22 de Janvier, 2013 par chuckfinley

Answer 1

5 Réponses

Answer 2

0voto

Super Model Points 1

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

Répondu el 10 de Mai, 2018 par Super Model (1 Points )

Answer 3

0voto

Muhammad Waqas Aziz Points 535

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 des valeurs contient toutes les valeurs des cellules de cette ligne. peut être utilisé comme values[0] première valeur de cellule de la ligne cliquée

Répondu el 28 de Juillet, 2018 par Muhammad Waqas Aziz (535 Points )

Answer 4

0voto

ankush Points 49

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>

Répondu el 16 de Août, 2018 par ankush (49 Points )

Answer 5

0voto

Muhammad Zakaria Points 61

Placer le code suivant dans header section

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

définir le tableau dans corps como

<table class="table table-hover">
            <tr>
                <th>Name/Nr.</th>
                <th>Street</th>
                <th>Town</th>
                <th>Postcode</th>
                <th>Country</th>
                <th>View</th>
            </tr>

            <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="btn grabId" >View</button></td>
            </tr>

</table>

alors utilisez ceci script

<script>
    $(".grabId").click(function() {
        var $row = $(this).closest("tr");    // Find the row
        var $siteId = $row.find(".siteId").text(); // Find the text
        alert($siteId);
    });
</script>

Répondu el 28 de Mai, 2021 par Muhammad Zakaria (61 Points )

Answer 6

0voto

BoMBxDEV Points 1

Essayez ceci, sélectionnez simplement javascript ou jquery. Si vous n'avez pas de colonne d'en-tête, ne la diminuez pas de 1.

function rowClicked(element){
    var rowJavascript = element.parentNode.parentNode;
    var rowjQuery = $(element).closest("tr");

    var rowIndexJavascript = rowJavascript.rowIndex-1;
    var rowIndexjQuery = rowjQuery[0].rowIndex-1;

    console.log("rowIndexJavascript : ",rowIndexJavascript);
    console.log("rowIndexjQuery : ",rowIndexjQuery);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<th>Row ID</th>
<th>Button</th>
</tr>
<tr>
<td>0</td><td><button type="button"  onclick="rowClicked(this)">test1</button></td>
</tr>
<tr>
<td>1</td><td><button type="button" onclick="rowClicked(this)">test2</button></td>
</tr>
<tr>
<td>2</td><td><button type="button" onclick="rowClicked(this)">test3</button></td>
</tr>
</table>

Répondu el 13 de Juillet, 2021 par BoMBxDEV (1 Points )

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

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

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

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: