How to get values from dynamic table using Jquery?

Question

I have following Code in my view.

@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

If I want to get a simple alert with the id of the current row by clicking the Get ID button, what should I do in jquery?

@MilindAnantwar I tried follwoing but it's not working... $('.cat-id').each(function () { $('.btn-danger').click(function () { alert($('.cat-id').text()); }); }); — Rashed Bishal
– Rashed Bishal, Commented Jul 6, 2018 at 11:15

Kapsonfire · Accepted Answer · 2018-07-06 11:15:05Z

1

give the get id button a proper selector like class '.getid'

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

you have to bind the listener to document to apply on dynamically inserted dom

answered Jul 6, 2018 at 11:15

Kapsonfire

1,0285 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Alex · Accepted Answer · 2018-07-06 11:21:57Z

Here is my contribution.

Something very similar to what Kapsonfire wrote.

$(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>

Ronak Chauhan · Accepted Answer · 2018-07-06 11:24:10Z

0

Here is solution for that

$(".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

answered Jul 6, 2018 at 11:24

Ronak Chauhan

7061 gold badge9 silver badges24 bronze badges

Collectives™ on Stack Overflow

How to get values from dynamic table using Jquery?

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related