Мені потрібно витягти деталі кожного стовпця в моїй таблиці. Наприклад, стовпець "Назва / №".

• Таблиця містить ряд адрес
• В останньому стовпці кожного рядка є кнопка, яка дозволяє користувачеві вибрати вказану адресу.

Проблема: Мій код підбирає лише перший, <td>який має клас nr. Як мені змусити це працювати?

Ось біт 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
});

Таблиця:

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

Завдання вправи - знайти рядок, що містить інформацію. Потрапивши туди, ми можемо легко отримати необхідну інформацію.

Відповідь

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

ПЕРЕГЛЯНУТИ ДЕМО

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

Як знайти найближчий рядок?

Використання .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>
});

ПЕРЕГЛЯНУТИ ДЕМО

Отримання конкретного <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>
});

ПЕРЕГЛЯНУТИ ДЕМО

Корисні методи

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

Спробуйте це:

$(".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- можливо, ви захочете створити рядок / масив зі значеннями.

Приклад тут

Отримання повної адреси на прикладі масиву тут

Вам потрібно змінити свій код, щоб знайти рядок щодо кнопки, по якій клацнули. Спробуйте це:

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

Приклад скрипки

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

Селектор ".nr:first"спеціально шукає перший і лише перший елемент, що має клас "nr"у вибраному елементі таблиці. Якщо ви замість цього зателефонуєте, .find(".nr")ви отримаєте всі елементи таблиці, що мають клас "nr". Отримавши всі ці елементи, ви можете скористатися методом .each для їх перебору. Наприклад:

$(".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елементів в таблиці, а не тільки один в рядку , яка була натиснута. Щоб додатково обмежити свій вибір рядком, що містить натиснуту кнопку, використовуйте метод .closest, приблизно так:

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

Знайти елемент з ідентифікатором у рядку за допомогою 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++;
    });
});

Тепер масив значень містить усі значення комірок цього рядка, які можна використовувати як значення [0] значення першої комірки клікнутого рядка

Ось повний код для простого прикладу делегата

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