How To Show A Specific Icon In A Table Row?

March 31, 2024 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();
});

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><tableid="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><tdclass="deleteAction">delete</td><tdclass="editAction">edit</td></tr><tr><td>Eve</td><td>Jackson</td><td>94</td><tdclass="deleteAction">delete</td><tdclass="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();
});

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><imgclass="editAction"></td><td><imgclass="deleteAction"></td></tr>

Solution 5:

<!DOCTYPE html><htmllang="en"><head><!-- Latest compiled and minified CSS --><linkrel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"><!-- jQuery library --><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script><!-- Latest compiled JavaScript --><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script></head><body><tableclass="table"><tr><td>test1</td><td><buttonclass="deleteAction">delete</button><br><buttonclass="editAction">edit</button></td></tr><tr><td>test2</td><td><buttonclass="deleteAction">delete</button><br><buttonclass="editAction">edit</button></td></tr><tr><td>test3</td><td><buttonclass="deleteAction">delete</button><br><buttonclass="editAction">edit</button></td></tr></table><scripttype="text/javascript">
    $(document).on('click', '.editAction', function () {
        var cur = $(this);
        cur.parent().find('.editAction').hide();
        cur.parent().find('.deleteAction').show();

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

Html5 Library