Question

I have this right now:

        <td id="delPMicon" style="padding-right:4px;padding:4px;">
                            ...Removebutton....
                        </td>

This is a delete button inside every <tr> (rows the database spitted out, used while() in PHP).

All the <tr> has a id #pm at the moment.

I would like to when you focus with your mouse/mark over with your mouse, over the <tr> the #delPMicon should appear, and then go away onblur.

I have tried this:

added css property to #delPMicon: display:none; and then:
$('#pm').focus(function() {
  $('#delPMicon').show();
});

This doesn’t work, don’t know what i did wrong.

I also know that id can only be used once, so the #pm focus will only work on one <tr> (if it worked properly), how can i solve this? I cant use class to the <tr>, as im using that for another function. What i can do (that i can think of) is adding the id of the row to the #pm, so it would be: #pm22, but then how can i say to the JS what id it should look after?

Or maybe i can add this .focus function to each tr in the while loop in order to get the ids, so i could do:

$('#pm<?php echo $id; ?>').focus(function() {

Answer 1

Try this

$('.pm').hover(function() {
    function() { $(this).find('.delPMicon').show(); },
    function() { $(this).find('.delPMicon').hide(); }
});

You can use the same class for all elements that currently have the same id. Then use the ‘this’ reference to attach an event handler to each one individually.