Как получить текст элемента <td>из другого элемента <td>с помощью jquery

Question

Я пытаюсь использовать кнопку внутри деления таблицы, чтобы задать для переменной то же значение, что и для другого деления в той же строке, но всякий раз, когда я запускаю свой код (ниже), он возвращает значение всех объединенных делений таблицы все вместе. Я не уверен, почему это происходит, поэтому я заменил «.children ()» на «childnodes [0]», чтобы попытаться получить только имя, но это просто не работает, и я не знаю почему.

Мой html выглядит так:

  <table>
    <tr>
      <td>John</td>
      <td>Doe</td>
      <td><button>Get First Name</button></td>
    </tr>
  </table>

А мой Javascript такой:

$(document).ready(function(){
    $("button").click(function(){
      var first = $(this).closest("tr").childNodes[0].text();
      alert(first)
        })
    });

Answer 1

вы можете найти : первого ребенка и получить его html () , как показано ниже:

$(document).ready(function() {
  $("button").click(function() {
    var first = $(this).closest("tr").children(":first").html();
    alert(first)
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td><button>Get First Name</button></td>
  </tr>
</table>

Answer 2

установить переменную, равную тому же значению, что и другое деление в той же строке

Есть много возможностей для этого, вот некоторые (сначала наиболее полезные (основанные на мнении)) )

$("button").click(function() {
  var first = $(this).closest("tr").find("td:first").text();
  var first = $(this).closest("tr").find("td").first().text();
  var first = $(this).closest("tr").find("td").eq(0).text();

  var first = $(this).closest("tr").children().first().text();
  var first = $(this).closest("tr").children().eq(0).text();

  var first = $(this).closest("td").siblings().first().text();
});

возвращает значение всех ячеек таблицы, объединенных вместе

https://api.jquery.com/text

Получить объединенное текстовое содержимое каждого элемента в наборе соответствующих элементов, включая их потомков, или установить текстовое содержимое соответствующих элементов.

, поскольку вы передаете "tr" в текст () он получает текст всех ячеек (tds) и их содержимое и т. д. c и объединяет их в одну, поэтому вам нужно ограничиться первой, как вы пытались.

однако .childNodes[0] может применяться только к элементу / узлу DOM, в то время как $(this).closest("tr") дает вам объект / коллекцию jquery, у которых нет свойства .childNodes.

Таким образом, jquery эквивалент будет использовать .children().eq(0).

Answer 3

Вы также можете использовать идентификаторы классов для получения необходимой информации.

<table>
  <tr>
    <td><span class="first-name">John</span></td>
    <td><span class="last-name">Doe</span></td>
    <td>
      <button class="btn-get-data" data-class="first-name">Get First Name</button>
      <button class="btn-get-data" data-class="last-name">Get Last Name</button>
    </td>
  </tr>
</table>


$(document).ready(function() {
  $(".btn-get-data").click(function() {
    $btn = $(this);
    $tr = $btn.closest('tr');
    var first = $tr.find('.' + $btn.attr('data-class')).html();
    alert(first);
  })
});

Если вы сделаете такой щелчок по кнопке generi c, например, вы можете добавить дополнительные кнопки на страницу и использовать их для получения класса в этой строке.

Вот пример рабочей скрипки: https://jsfiddle.net/b1r0nucq/