Получите содержимое строки таблицы нажатием кнопки

Question

Мне нужно извлечь детали каждого столбца в моей таблице. Например, столбец «Name/Nr.».

• Таблица содержит ряд адресов
• Самый последний столбец каждой строки есть кнопка, которая позволяет пользователю выбрать указанный адрес.

Проблема: Мой код только поднимает первый <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> 

Answer 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

Getting специфическое значение <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() - получить непосредственно предшествующий родственный элемент каждого элемента в наборе согласованных элементов

Answer 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 (подходя беспересадочный ugh DOM) кнопки, нажатой в данный момент, а затем петля каждого td - вы можете создать строку/массив со значениями.

Example here

Getting the full address using an array example here

Answer 3

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

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

Example fiddle

Answer 4

".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 элементов в таблице, а не только один в строке, которая была нажата. Для того, чтобы еще более ограничить свой выбор на строку, содержащую кнопку Clicked, используйте метод .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 
    }); 
}); 

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