jQuery: hover, show and table issue

Okay, so i have <table>

inside this there's <tr>´s that defines these boxes above (the lightgrey/grey/yellow..)

Now i want to make so when you hover over a box, you a deletebutton will appear.

I have done this by inside each <tr> (inside each box) there's this:

            <td id="delPMicon<?php echo $id; ?>" style="display: none;">
                            <img src="images/removeWallComment.png">
                        </td>

Then, i got this:

$('[name=pm]').hover(function() {
var id = $(this).attr('id');

    $('#delPMicon'+ id).show();

});

name="pm" is the name of each <tr>.

This works fine, but when i mark over one of the boxes, it turns like how you see above. The content gets moved at left alittle and then this comes. I do not want this. I want it to be like the top of the image, and then when you mark over, there just comes an del button, without any changes on the table, and dont gets so ugly like you can see at above when i hover the other boxes gets smaller?

How can i do this?

Here's my <tr>

                            <tr 
                            <?php 
                            if($type == "invitation"){
                            echo 'class="pmInvitation"';
                            }else{
                            echo $checkSeen; }?> id="<?php echo $id; ?>" name="pm">
    <td class="alternating" style="padding:4px;">
                               <img border="0" class="image-xxsmall-border" src="images/profilePhoto/thumbs/<?php echo profilbild($bID); ?>" style="width: 44px; height: 48px;">
                                </td>
    <td valign="top" style="padding-top:4px;padding:4px;" class="alternating">
                            <a href="profil.php?id=<?php echo $bID; ?>"><?php echo $name; ?></a>
                            <br />
                                    <span title="forsendelses dato" class="GrayText"><?php get_time($date); ?>
                                    <?php if(!(get_day_name_return($date) == "idag")){
                                    echo "<br>". get_day_name_return($date);  }?></span>

                                </td>
    <td valign="top" style="padding-top:4px;padding:4px;" class="alternating">

                                </td>
    <td valign="top" style="paddin开发者_如何学Pythong-top:4px;padding:4px;" class="alternating">
                                    <a href="pm.php?read=<?php echo $id; ?>">
                                    <?php echo $title; ?></a>
                                    <br />
                                    <span style="font-size: 11px; font-style: italic;">
                                     <a href="pm.php?read=<?php echo $id; ?>">
                                    <?php echo substr($msg, 0, 46); ?>..
                                    </a>
                                    </span>

                                </td>


        <td style="padding-right:4px;padding:4px;" class="alternating">
                                        <input class="cbPick" name="marks[]" type="checkbox" value="<?php echo $id; ?>">
                                    </td>


<td id="delPMicon<?php echo $id; ?>" style="display: none;">
                                        <img src="images/removeWallComment.png">
                                    </td>
                                                                    </td>
    </tr>

I even tried to remove the display: none of the #delPMicon, remove the img, and then on hover it should prepend the img, this works alittle, but the text in the middle and on the left gets moved to the left more, its like its to give some space for the delbutton, but there's plenty of space, of what i can see?

The problem is "display: none" makes the target element take up no space, and it's also not a good idea to put it on the table cell because that makes for partially-hidden columns. Instead, use "visibility: hidden;" and put it on the inside image, like this:

<td>
   <img src="images/removeWallComment.png" id="delPMicon<?php echo $id; ?>" style="visibility: hidden;">
</td>

And then in your code, instead of "show()"ing the elements you'd set the visibility css, like below. You are also missing your hover out handler, so I've included it below too.

$('[name=pm]').hover(function() {
    var id = $(this).attr('id');
    $('#delPMicon'+ id).css('visibility', 'visible');
}, function() {
    var id = $(this).attr('id');
    $('#delPMicon'+ id).css('visibility', 'hidden');
});

Also, consider reading up on HTML and jQuery coding styles and best practices. You are doing a lot of things in your code that are considered stylistically sloppy/ugly because they make your code more bug-prone and a lot harder to maintain.

To at least make the uglyness consistent (make the delete button use space even when it's invisible), use visibility: hidden and visibility: visible.