Как получить значения из динамической таблицы с помощью Jquery?

Question

У меня следующий код на мой взгляд.

@foreach($categories as $category)
<tr class="cat-row">
<td class="cat-id">{{$category->id}}</td>
<td>{{$category->name}}</td>
<td><a href="" class="btn btn-danger">Get ID</a></td>
</tr>
@endforeach

Если я хочу получить простое предупреждение с идентификатором текущей строки, нажав кнопку «Получить идентификатор», что мне делать в jquery?

Answer 1

Вот мой вклад.

Что-то очень похожее на то, что написал Kapsonfire .

---

$(document).on('click', '.btn-danger', (e) => {
  let target = e.target;
  let topmostParent = target.parentElement.parentElement;
  let id = $(topmostParent).find('.cat-id').text();
  console.log(id);
});

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

<table>
  <tr class="cat-row">
    <td class="cat-id">123</td>
    <td>Test</td>
    <td><a href="#" class="btn btn-danger">Get ID</a></td>
  </tr>

  <tr class="cat-row">
    <td class="cat-id">124</td>
    <td>Test</td>
    <td><a href="#" class="btn btn-danger">Get ID</a></td>
  </tr>

  <tr class="cat-row">
    <td class="cat-id">125</td>
    <td>Test</td>
    <td><a href="#" class="btn btn-danger">Get ID</a></td>
  </tr>

  <tr class="cat-row">
    <td class="cat-id">126</td>
    <td>Test</td>
    <td><a href="#" class="btn btn-danger">Get ID</a></td>
  </tr>
</table>

Answer 2

Вот решение для этого

$(".getId").on('click',function() {
 let id = $(this).attr('id');
 console.log(id);
});

/*PHP File*/

@foreach($categories as $category)
<tr class="cat-row">
<td class="cat-id">{{$category->id}}</td>
<td>{{$category->name}}</td>
<td><a href="" class="btn btn-danger getId" data-id="{{$category->id}}">Get ID</a></td>
</tr>
@endforeach

Answer 3

присваивает кнопке get id правильный селектор, такой как класс '.getid'

$(document).on('click', '.getid', function() {
 let id = $(this).closest('tr').find('.cat-id').text();
 console.log(id);
});

Вы должны привязать слушателя к документу, чтобы применить его к динамически вставленной DOM