Holen Sie sich den Inhalt einer Tabellenzeile mit einem Klick auf die Schaltfläche

87

Ich muss die Details jeder Spalte in meiner Tabelle extrahieren. Zum Beispiel Spalte "Name / Nr.".

  • Die Tabelle enthält eine Reihe von Adressen
  • Die allerletzte Spalte jeder Zeile enthält eine Schaltfläche, mit der ein Benutzer eine aufgelistete Adresse auswählen kann.

Problem: Mein Code nimmt nur den ersten auf <td>, der eine Klasse hat nr. Wie bringe ich das zum Laufen?

Hier ist das jQuery-Bit:

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

Tabelle:

<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>
Chuckfinley
quelle
3
Hier ist ein vollständiges Tutorial mit einer Live-Demo zum Abrufen
Satinder singh

Antworten:

256

Ziel der Übung ist es, die Zeile zu finden, die die Informationen enthält. Wenn wir dort ankommen, können wir leicht die erforderlichen Informationen extrahieren.

Antworten

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

DEMO ANZEIGEN

Konzentrieren wir uns nun auf einige häufig gestellte Fragen in solchen Situationen.

Wie finde ich die nächste Reihe?

Verwenden von .closest():

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

Verwenden von .parent():

Sie können den DOM-Baum auch mithilfe der .parent()Methode nach oben verschieben. Dies ist nur eine Alternative, die manchmal zusammen mit .prev()und verwendet wird .next().

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

Erste alle <td>Tabellenzellenwerte

Wir haben also unseren $rowund möchten Tabellenzellentext ausgeben:

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

DEMO ANZEIGEN

Einen bestimmten <td>Wert erhalten

Ähnlich wie beim vorherigen können wir jedoch den Index des untergeordneten <td>Elements angeben .

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

DEMO ANZEIGEN

Nützliche Methoden

  • .closest() - Holen Sie sich das erste Element, das dem Selektor entspricht
  • .parent() - Holen Sie sich das übergeordnete Element jedes Elements in den aktuellen Satz übereinstimmender Elemente
  • .parents() - Holen Sie sich die Vorfahren jedes Elements in den aktuellen Satz übereinstimmender Elemente
  • .children() - Holen Sie sich die untergeordneten Elemente jedes Elements in den Satz übereinstimmender Elemente
  • .siblings() - Holen Sie sich die Geschwister jedes Elements in den Satz der übereinstimmenden Elemente
  • .find() - Holen Sie sich die Nachkommen jedes Elements in den aktuellen Satz übereinstimmender Elemente
  • .next() - Holen Sie sich das unmittelbar folgende Geschwister jedes Elements aus dem Satz übereinstimmender Elemente
  • .prev() - Holen Sie sich das unmittelbar vorhergehende Geschwister jedes Elements aus dem Satz übereinstimmender Elemente
Martynas
quelle
Was ist, wenn ich ein Popup habe und von der Seite aus auf eine Tabelle zugreifen und die Zeile löschen möchte? Ich habe eine der Methoden ausprobiert, aber sie funktioniert bei mir nicht: /
Si8
Kannst du eine jsFiddle vorbereiten?
Martynas
1
Hier habe ich ein ähnliches Problem beim Umgang mit dynamischen ID-Werten. Bitte werfen Sie einen Blick auf stackoverflow.com/questions/25772554/…
Sanjeev4evr
5
Keine Ahnung, wie diese Antwort nicht viel besser bewertet wird. Hervorragende Tipps! Ich wollte nur hinzufügen, dass Sie den Spaltenwert immer so erhalten können, nachdem Sie die spezifische Zeile $ (this) .closest ("tr"). Find ("td: eq (2)"). Html () erhalten haben. Sie erhalten die Spalte Nummer 2. Prost!
Matias
1
Ich benutze diese Antwort immer noch von Zeit zu Zeit. Wirklich hilfreich und mit einigen geringfügigen Änderungen funktioniert im Grunde mit jedem Tisch!
Mese
11

Versuche dies:

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

Dadurch wird der nächstgelegene tr(durch das DOM gehende) der aktuell angeklickten Schaltfläche gefunden und anschließend jeweils eine Schleife erstellt. tdMöglicherweise möchten Sie eine Zeichenfolge / ein Array mit den Werten erstellen.

Beispiel hier

Abrufen der vollständigen Adresse anhand eines Array-Beispiels hier

Pfarrhaus
quelle
10

Sie müssen Ihren Code ändern, um die Zeile relativ zu der Schaltfläche zu finden, auf die geklickt wurde. Versuche dies:

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

Beispiel Geige

Rory McCrossan
quelle
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
};

dann auf deinen Knopf:

onclick="useAdress()"
Cody Collicott
quelle
1
Das hat das gleiche Problem wie der Code in der Frage - es erhält immer die ID aus der ersten Zeile in der Tabelle, unabhängig davon, auf welche Schaltfläche in der Zeile geklickt wurde.
dgvid
3

Der Selektor ".nr:first"sucht speziell nach dem ersten und nur dem ersten Element mit einer Klasse "nr"innerhalb des ausgewählten Tabellenelements. Wenn Sie stattdessen aufrufen, erhalten .find(".nr")Sie alle Elemente in der Tabelle mit Klasse "nr". Sobald Sie alle diese Elemente haben, können Sie die .each- Methode verwenden, um sie zu durchlaufen . Beispielsweise:

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

Das würde Sie jedoch erhält alle der td.nrElemente in der Tabelle, nicht nur die in der Reihe , die geklickt wurde. Um Ihre Auswahl weiter auf die Zeile zu beschränken, die die angeklickte Schaltfläche enthält, verwenden Sie die .closest- Methode wie folgt :

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

Suchen Sie mit jquery ein Element mit der ID in der Zeile

$(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 );
    });
});
Supermodel
quelle
0
var values = [];
var count = 0;
$("#tblName").on("click", "tbody tr", function (event) {
   $(this).find("td").each(function () {
       values[count] = $(this).text();
       count++;
    });
});

Jetzt enthält das Wertearray alle Zellenwerte dieser Zeile. Es kann wie der erste Zellenwert der angeklickten Zeile verwendet werden

Muhammad Waqas Aziz
quelle
0

Hier ist der vollständige Code für ein einfaches Beispiel für einen Delegaten

<!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>
Ankush
quelle