Как получить значения из ячеек таблицы в HTML, используя jquery?

Question

Как сделать так, чтобы кнопка вызывала оповещение, показывая только имя и фамилию человека из той же строки, что и кнопка?

Я вставил свой текущий код из jsfiddle ниже, но кнопка вернуласьпустая строка.

Я неправильно интерпретирую JavaScript?

1. Получить строку ближайшей таблицы к кнопке, то есть ту же строку таблицы, что и у кнопки, и сохранить ее в переменной строки.
2. поиск каждого контейнера данных таблицы в той же строке таблицы для кнопки.
3. создание переменной "персона"
4. в текущей строке, поиск html внутри метки икласс FirstName / LastName.
5. Отображение сообщения, содержащего преобразование строки заполненной теперь переменной person.

HTML

$("button").on("click", function() {
  var row = $(this).closest("tr");
  $("td", row).each(function() {
    var person = {};
    person.FirstName = row.find(".label").find(".FirstName").html();
    person.LastName = row.find(".label").find(".LastName").html();
    alert(JSON.stringify(person));
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td><span class="label FirstName">John</span></td>
    <td><span class="label LastName">Doe</span></td>
    <td><button class="button">Button 1</button></td>
  </tr>
  <tr>
    <td><span class="label FirstName">Richard</span></td>
    <td><span class="label LastName">Roe</span></td>
    <td><button class="button">Button 2</button></td>
  </tr>
</table>

Answer 1

.find() для поиска элементов, содержащихся в других элементах, но .FirstName не содержится внутри .label, это один и тот же элемент. Чтобы выбрать элемент с двумя классами, поместите их в один селектор без пробелов между ними (пробел также означает поиск элемента-потомка).

    person.FirstName = row.find(".label.FirstName").html();
    person.LastName = row.find(".label.LastName").html();

$("button").on("click", function() {
  var row = $(this).closest("tr");
  $("td", row).each(function() {
    var person = {};
    person.FirstName = row.find(".label.FirstName").html();
    person.LastName = row.find(".label.LastName").html();
    alert(JSON.stringify(person));
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td><span class="label FirstName">John</span></td>
    <td><span class="label LastName">Doe</span></td>
    <td><button class="button">Button 1</button></td>
  </tr>
  <tr>
    <td><span class="label FirstName">Richard</span></td>
    <td><span class="label LastName">Roe</span></td>
    <td><button class="button">Button 2</button></td>
  </tr>
</table>

Answer 2

Когда .find() ищет совпадения в потомках, row.find(".label").find(".FirstName") будет искать элемент, имеющий класс .FirstName в элементе .label. Чтобы соответствовать самому ярлыку, вы можете использовать .find(".label.FirstName")

Также нет необходимости перебирать каждую ячейку в строке, используя .each(), так как метод find уже выбирает подходящую ячейку для вас.

$("button").on("click", function() {
  var row = $(this).closest("tr");
  var person = {
    FirstName: row.find(".label.FirstName").html(),
    LastName: row.find(".label.LastName").html()
  };
  console.log(person);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td><span class="label FirstName">John</span></td>
    <td><span class="label LastName">Doe</span></td>
    <td><button class="button">Button 1</button></td>
  </tr>
  <tr>
    <td><span class="label FirstName">Richard</span></td>
    <td><span class="label LastName">Roe</span></td>
    <td><button class="button">Button 2</button></td>
  </tr>
</table>