javascript - How to show a specific icon in a table row?

Question

I have a table and each row has an icon. When you click on the icon, it should show another icon that was hidden. My problem is that when I click on this icon, it always changes the first row, not the row of the icon that I have clicked.

This is my function:

$("#myTable").on('click', 'tbody tr #editAction', function () { 
    $('#deleteAction').show();
    $('#editAction').hide();
});

Answer 1

The attribute id must be unique in a document, you can use class instead. You also have to target the current element with this keyword.

Demo:

$("#myTable").on('click', 'tbody tr .editAction', function () {
    $(this).closest('.deleteAction').show();
    $(this).hide();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="myTable" style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tbody>
    <tr>
      <td>Jill</td>
      <td>Smith</td> 
      <td>50</td>
      <td class="deleteAction">delete</td>
      <td class="editAction">edit</td>
    </tr>
    <tr>
      <td>Eve</td>
      <td>Jackson</td> 
      <td>94</td>
      <td class="deleteAction">delete</td>
      <td class="editAction">edit</td>
    </tr>
  </tbody>
  
</table>