Jquery taking the <i> parent

Asked

Viewed 179 times

0

Good people, I need to get the ID of the clicked one. My HTML is as follows:

<table id="datatable">
    <thead>
      <tr>
        <th>Nome</th>
        <th>Data de Nascimento</th>
        <th>Telefone</th>
        <th>Email</th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      @foreach($clients as $client)
          <tr class="editLink" id="{{ $client->id }}">
            <td>{{ $client->name }}</td>
            <td>{{ $client->birthdate }}</td>
            <td>{{ $client->phone }}</td>
            <td>{{ $client->email }}</td>
            <td class="delete delete_client"><i  class="material-icons red-text delete-tupla">delete_forever</i></td>
          </tr>
      @endforeach
    </tbody>
  </table>

I am using the Laravel Blade to iterate the object that comes from the Controller, my question is the following, if the user clicks this in a <i>, as I do to get the id that is in the tr of it, I’m trying to do so:

$(this).closest('tr').html()

The JS is like this:

$(".delete_client").click(function(e){

  console.log($(this).closest('tr').html());

});

The problem is that it always takes the tr of the first iteration, if I have 10 lines, it always takes the first one, and I need to take the one that was clicked..

Any hint?

Thank you, hugs

javascript jquery html

  • You can show Javascript/jQuery that you have in addition to the line that is in the question?

  • I edited there, thanks for the tip

  • 2

    Use $(this).closest('tr').attr("id").

  • 1

    The father of <i>is the td, and the tris the grandfather.

  • Also note that you clicked on <td> and not in the<i>. Confirm that it makes a difference to what you’re trying to do

  • @Isac I also had repaired that, but it makes no difference in this case.

  • 1

    In fact it was already working, had already tried the $(this). Closest('tr'), but as was looking for the . html(), obviously he sent me everything he had inside the TR, when in fact I needed to put the . attr('id'). Thank you to those who replied!

  • @Hermus Put yourself the answer and then mark it as right. Good luck!

  • @DVD yes to the id it just makes no difference, but if you try to navigate to the parent() or next() for example already will. It should be kept in mind what you want and be careful. I would personally change the click to the <i> if this is the initial idea regarding the click

  • @Isac I already find it best intd, because so the whole area of the td is clickable.

Show 5 more comments

2 answers

2


The @DVD response was correct, 

$(this).closest('tr').attr("id")

I was using . html(), so I was showing me all the content inside the TR and not . attr("id") to get the ID of the tr.

Thank you who replied.

0

Since you are mounting this in PHP you have 2 possibilities:

Passing ID with PHP with onclick="delete("{{ $client->id }}")":

<tbody>
  @foreach($clients as $client)
      <tr class="editLink" id="{{ $client->id }}">
        <td>{{ $client->name }}</td>
        <td>{{ $client->birthdate }}</td>
        <td>{{ $client->phone }}</td>
        <td>{{ $client->email }}</td>
        <td class="delete delete_client" onclick="deleteRow("{{ $client->id }}")"><i  class="material-icons red-text delete-tupla">delete_forever</i></td>
      </tr>
  @endforeach
</tbody>

So you just need to have a name function deleteRow receiving the ID.

Using Javascript (or jQuery):

Here is more like less as already mentioned:

$(".delete_client").click(function(e){
  var id = this.closest('tr').id;
  // ou com jQuery
  // var id = $(this).closest('tr').attr("id");
});

Browser other questions tagged javascript jquery html

You are not signed in. Login or sign up in order to post.