Ответ 1

Цель упражнения - найти строку, содержащую информацию. Когда мы доберемся туда, мы сможем легко извлечь требуемую информацию.

Ответ

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

VIEW DEMO

Теперь позвольте сосредоточиться на некоторых часто задаваемых вопросах в таких ситуациях.

Как найти ближайшую строку?

Использование .closest():

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

Использование .parent():

Вы также можете перемещаться по дереву DOM с помощью метода .parent(). Это просто альтернатива, которая иногда используется вместе с .prev() и .next().

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

Получение всех значений ячейки таблицы <td>

Итак, у нас есть наш $row, и мы хотим вывести текст ячейки таблицы:

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

VIEW DEMO

Получение определенного значения <td>

Как и предыдущий, мы можем указать индекс дочернего элемента <td>.

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

VIEW DEMO

Полезные методы

• .closest() - получить первый элемент, который соответствует селектору
• .parent() - получить родительский элемент каждого элемента в текущем наборе согласованных элементов
• .parents() - получить предков каждого элемента в текущем наборе согласованных элементов
• .children() - получить дочерние элементы каждого элемента в наборе согласованных элементов
• .siblings() - получить братьев и сестер каждого элемента из набора согласованных элементов
• .find() - получить потомки каждого элемента в текущем наборе согласованных элементов
• .next() - получить сразу следующий родственный элемент каждого элемента в наборе согласованных элементов
• .prev() - получить непосредственно предшествующий родственный элемент каждого элемента в наборе согласованных элементов

Ответ 2

Попробуйте следующее:

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

Это найдет ближайший tr (идущий через DOM) кнопки, нажатой в данный момент, и затем зациклирует каждый td - вам может понадобиться создать строку/массив со значениями.

Пример здесь

Получение полного адреса с использованием примера массива здесь

Ответ 3

Вам нужно изменить свой код, чтобы найти строку относительно кнопки, которая была нажата. Попробуйте следующее:

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

Пример скрипта

Ответ 4

Селектор ".nr:first" специально ищет первый и только первый элемент с классом "nr" в пределах выбранного элемента таблицы. Если вы вызываете .find(".nr"), вы получите все элементы в таблице, имеющие класс "nr". Когда у вас есть все эти элементы, вы можете использовать . Каждый метод, чтобы перебирать их. Например:

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

Тем не менее, вы получите все элементы td.nr в таблице, а не только те, которые были нажаты. Чтобы дополнительно ограничить свой выбор до строки, содержащей нажатую кнопку, используйте метод . Ближайший, например:

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

Ответ 5

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

то на вашей кнопке:

onclick="useAdress()"

код >

Ответ 6

Найти элемент с id в строке с помощью 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 );
    });
});

Ответ 7

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

Теперь массив значений содержит все значения ячейки этой строки, которые могут использоваться как значения [0] значение первой ячейки щелкнутой строки

Ответ 8

Вот полный код для простого примера делегата

<!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="#" onclick="location.href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'; return false;">
  <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>