Necesito extraer los detalles de cada columna en mi tabla. Por ejemplo, columna "Nombre / Nr.".

• La tabla contiene varias direcciones
• La última columna de cada fila tiene un botón que permite al usuario elegir una dirección en la lista.

Problema: Mi código solo recoge el primero <td>que tiene una clase nr. ¿Cómo hago para que esto funcione?

Aquí está el 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
});

Mesa:

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

El objeto del ejercicio es encontrar la fila que contiene la información. Cuando llegamos allí, podemos extraer fácilmente la información requerida.

Responder

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

VER DEMO

Ahora centrémonos en algunas preguntas frecuentes en tales situaciones.

¿Cómo encontrar la fila más cercana?

Usando .closest():

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

Usando .parent():

También puede subir el árbol DOM usando el .parent()método. Esta es solo una alternativa que a veces se usa junto con .prev()y .next().

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

Obtener todos los <td>valores de celda de la tabla

Entonces tenemos nuestro $rowy nos gustaría generar el texto de la celda de la tabla:

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

VER DEMO

Obtener un <td>valor específico

Similar al anterior, sin embargo, podemos especificar el índice del <td>elemento hijo .

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

VER DEMO

Métodos útiles

• .closest() - obtener el primer elemento que coincida con el selector
• .parent() - obtener el padre de cada elemento en el conjunto actual de elementos coincidentes
• .parents() - obtener los antepasados ​​de cada elemento en el conjunto actual de elementos coincidentes
• .children() - obtener los hijos de cada elemento en el conjunto de elementos coincidentes
• .siblings() - obtener los hermanos de cada elemento en el conjunto de elementos emparejados
• .find() - obtener los descendientes de cada elemento en el conjunto actual de elementos coincidentes
• .next() - obtener el hermano inmediatamente siguiente de cada elemento en el conjunto de elementos coincidentes
• .prev() - obtener el hermano inmediatamente anterior de cada elemento en el conjunto de elementos coincidentes

Prueba esto:

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

Esto encontrará el más cercano tr(subiendo a través del DOM) del botón en el que se hizo clic actualmente y luego tdhará un bucle en cada uno ; es posible que desee crear una cadena / matriz con los valores.

Ejemplo aquí

Obtener la dirección completa usando un ejemplo de matriz aquí

Debe cambiar su código para encontrar la fila relativa al botón en el que se hizo clic. Prueba esto:

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

Violín de ejemplo

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

luego en tu botón:

onclick="useAdress()"

El selector ".nr:first"busca específicamente el primer elemento, y solo el primero, que tiene clase "nr"dentro del elemento de tabla seleccionado. Si en cambio llama .find(".nr"), obtendrá todos los elementos dentro de la tabla que tienen clase "nr". Una vez que tenga todos esos elementos, puede usar el método .each para iterar sobre ellos. Por ejemplo:

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

Sin embargo, eso le permitiría obtener todos los td.nrelementos de la tabla, no solo el de la fila en la que se hizo clic. Para limitar aún más su selección a la fila que contiene el botón en el que se hizo clic, use el método .closest , así:

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

Buscar elemento con id en fila usando 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 );
    });
});

var values = [];
var count = 0;
$("#tblName").on("click", "tbody tr", function (event) {
   $(this).find("td").each(function () {
       values[count] = $(this).text();
       count++;
    });
});

Ahora la matriz de valores contiene todos los valores de celda de esa fila se puede usar como valores [0] primer valor de celda de la fila en la que se hizo clic

Aquí está el código completo para un ejemplo simple de delegado

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