Preciso extrair os detalhes de cada coluna da minha tabela. Por exemplo, coluna "Nome / Nr.".

• A tabela contém vários endereços
• A última coluna de cada linha possui um botão que permite ao usuário escolher um endereço listado.

Problema: Meu código só pega o primeiro <td>que tem uma classe nr. Como faço para que isso funcione?

Aqui está a parte 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
});

Tabela:

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

O objetivo do exercício é encontrar a linha que contém as informações. Quando chegarmos lá, podemos facilmente extrair as informações necessárias.

Responda

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

Agora, vamos nos concentrar em algumas perguntas frequentes nessas situações.

Como encontrar a linha mais próxima?

Usando .closest():

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

Usando .parent():

Você também pode subir na árvore DOM usando o .parent()método. Esta é apenas uma alternativa que às vezes é usada junto com .prev()e .next().

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

Obtendo todos os <td>valores das células da tabela

Portanto, temos nosso $rowe gostaríamos de produzir o texto da célula da tabela:

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

Obtendo um <td>valor específico

Semelhante ao anterior, porém podemos especificar o índice do <td>elemento filho .

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

• .closest() - obtenha o primeiro elemento que corresponda ao seletor
• .parent() - obtém o pai de cada elemento no conjunto atual de elementos correspondentes
• .parents() - obter os ancestrais de cada elemento no conjunto atual de elementos correspondentes
• .children() - obtenha os filhos de cada elemento no conjunto de elementos correspondentes
• .siblings() - obter os irmãos de cada elemento no conjunto de elementos correspondentes
• .find() - obtém os descendentes de cada elemento no conjunto atual de elementos correspondentes
• .next() - obter o irmão imediatamente seguinte de cada elemento no conjunto de elementos correspondentes
• .prev() - obter o irmão imediatamente anterior de cada elemento no conjunto de elementos correspondentes

Experimente isto:

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

Isso encontrará o mais próximo tr(subindo pelo DOM) do botão atualmente clicado e, em seguida, fará um loop em cada um td- você pode querer criar uma string / array com os valores.

Exemplo aqui

Obter o endereço completo usando um exemplo de array aqui

Você precisa alterar seu código para encontrar a linha relativa ao botão que foi clicado. Experimente isto:

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

Exemplo de violino

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

então em seu botão:

onclick="useAdress()"

O seletor ".nr:first"está procurando especificamente pelo primeiro, e apenas o primeiro, elemento com classe "nr"dentro do elemento de tabela selecionado. Se, em vez disso, você chamar .find(".nr"), obterá todos os elementos da tabela com classe "nr". Depois de ter todos esses elementos, você pode usar o método .each para iterar sobre eles. Por exemplo:

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

No entanto, você obteria todos os td.nrelementos da tabela, não apenas aquele da linha que foi clicado. Para limitar ainda mais sua seleção à linha que contém o botão clicado, use o método .closest , assim:

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

Encontre o elemento com id na linha 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++;
    });
});

Agora a matriz de valores contém todos os valores da célula daquela linha podem ser usados ​​como valores [0] primeiro valor da célula da linha clicada

Aqui está o código completo para um exemplo simples 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>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>