it-swarm.com.de

Holen Sie sich den Inhalt einer Tabellenzeile mit einem Klick

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

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

Problem: Mein Code greift nur den ersten <td> auf, der eine Klasse nr hat. Wie bekomme 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>
60
chuckfinley

Das Ziel der Übung besteht darin, 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 jetzt 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 mit der Methode .parent() nach oben verschieben. Dies ist nur eine Alternative, die manchmal zusammen mit .prev() und .next() verwendet wird.

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

Abrufen aller Tabellenzellen <td>-Werte

Wir haben also unseren $row und möchten den Text der Tabellenzelle 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 abrufen

Ä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() - Liefert das erste Element, das dem Selektor entspricht
  • .parent() - Ruft das übergeordnete Element jedes Elements in der aktuellen Gruppe übereinstimmender Elemente ab
  • .parents() - Liefert die Vorfahren der einzelnen Elemente im aktuellen Satz übereinstimmender Elemente
  • .children() - Ruft die untergeordneten Elemente jedes Elements in der Menge der übereinstimmenden Elemente ab
  • .siblings() - Ruft die Geschwister jedes Elements im Satz übereinstimmender Elemente ab
  • .find() - Liefert die Nachkommen jedes Elements in der aktuellen Menge übereinstimmender Elemente
  • .next() - Holen Sie sich das unmittelbar folgende Geschwister jedes Elements in der Menge der übereinstimmenden Elemente
  • .prev() - Ruft das unmittelbar vorangehende gleichgeordnete Element jedes Elements in der Menge der übereinstimmenden Elemente ab
204
martynas

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 die nächstgelegene tr (durch das DOM nach oben) der aktuell angeklickten Schaltfläche gesucht und anschließend jede td-Schleife durchlaufen.

Beispiel hier

Erhalten der vollständigen Adresse mit einem Array-Beispiel hier

8
ManseUK

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

Beispielfiedel

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

dann auf deinem Button: 

onclick="useAdress()"
1
cody collicott

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

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

Dies würde jedoch alle der td.nr-Elemente in der Tabelle erhalten, nicht nur das Element in der Zeile, auf das geklickt wurde. Um Ihre Auswahl weiter auf die Zeile zu begrenzen, die die angeklickte Schaltfläche enthält, verwenden Sie die Methode .closest 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
    });
});
1
dgvid

Hier ist der vollständige Code für ein einfaches Beispiel eines Delegierten

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

Werte-Array enthält nun alle Zellenwerte dieser Zeile Kann wie Werte [0] erster Zellenwert der angeklickten Zeile verwendet werden

0

Finde ein Element mit der ID in einer Zeile mit 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