How To Show A Specific Icon In A Table Row?

August 03, 2022 Post a Comment

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 th

Solution 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>

Solution 2:

$('#deleteAction') results in a global search in the DOM that returns the first element that matches the id, ensure each id in the DOM is unique.

Solution 3:

Try to implement class selector as following

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

Baca Juga

Solution 4:

As others have mentioned, $('#deleteAction') will return the first element that matches that id. Instead of using IDs, you should use classes. Classes can be used more than once on a page, whereas IDs should not be.

The code below will hide the clicked .editAction, then show the .deleteAction from the same row.

$("#myTable").on('click', 'tbody tr .editAction', function () {

    $(this).hide().closest("tr").find(".deleteAction").show();

});

HTML wise, you will need to replace id="#editAction" with class="editAction":

<tr>
    <td><img class="editAction"></td>
    <td><img class="deleteAction"></td>
</tr>

Solution 5:

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">

    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

    <!-- Latest compiled JavaScript -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<table class="table">
    <tr>
        <td>test1</td>
        <td>
            <button class="deleteAction">delete</button>
            <br>
            <button class="editAction">edit</button>

        </td>
    </tr>
    <tr>
        <td>test2</td>
        <td>
            <button class="deleteAction">delete</button>
            <br>
            <button class="editAction">edit</button>

        </td>
    </tr>
    <tr>
        <td>test3</td>
        <td>
            <button class="deleteAction">delete</button>
            <br>
            <button class="editAction">edit</button>

        </td>
    </tr>
</table>

<script type="text/javascript">
    $(document).on('click', '.editAction', function () {
        var cur = $(this);
        cur.parent().find('.editAction').hide();
        cur.parent().find('.deleteAction').show();

    });
</script>
</body>
</html>

JavaScript Passion