it-swarm.com.ru

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

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

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

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

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

Ответ

$(".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() - получить непосредственно предшествующего брата каждого элемента в наборе соответствующих элементов
204
martynas

Попробуй это:

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

Пример здесь

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

8
ManseUK

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

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

Пример Fiddle

8
Rory McCrossan
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()"
1
cody collicott

Селектор ".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
    });
});
1
dgvid

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

<!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>
0
ankush
var values = [];
var count = 0;
$("#tblName").on("click", "tbody tr", function (event) {
   $(this).find("td").each(function () {
       values[count] = $(this).text();
       count++;
    });
});

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

0
Muhammad Waqas Aziz

Найти элемент с идентификатором в строке, используя 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 );
    });
});
0
Super Model