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>

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

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

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

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

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

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

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

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>