Refreshing TR after TD is modified

I have a table tag having trs and tds. At runtime I am adding an image to one of the tds and simultaneously moving it to overlap the old data in the td. This shows the image overlay nicely but the size of the td once changed does not return back to appropriate. Now that the image has moved space is left below it in the td. I want to be able to redraw or refresh the tr to display the data properly. I have tried changing the style attributes of the td so that the system is forced to do a refresh for the page. But no change. Please help me with this.

    imgstring = "<img src='Images/comment.JPG' width='60' height='42' alt='' title='' class='forImg' />";
var obj = document.getElementById("id for a td");
var leftCoord = $(obj).offset().left;
var 开发者_JS百科topCoord = $(obj).offset().top;

$(imgstring).appendTo(obj).css({'visibility':'visible',
                'top':function(index,value){return value = -($(this).offset().top - topCoord) + "px";},
                 'left':function(index,value){return value = -($(this).offset().left - leftCoord) + "px";},
                 });

The above code sets the overlapping properly but the space remaining after the image is moved does not get removed.

Thanks in advance,

Set a trigger on the td event and a listener on the tr event:

$(imgstring).appendTo(obj).css({'visibility':'visible',
                'top':function(index,value){return value = -($(this).offset().top - topCoord) + "px";},
                 'left':function(index,value){return value = -($(this).offset().left - leftCoord) + "px";},
                 }).trigger('td_updated');

$('tr').live('td_updated',function()
{
  // resize tr to match new height of td
});

I'm keeping my other answer because I can see it being useful for another individual, but this is essentially what you need for your particular case:

CSS:

    td img {
        vertical-align:bottom;
    }

Simple as that ;)

Here's an example: http://jsfiddle.net/AlienWebguy/SQGwa/5/

The actual problem is being caused by the DOCTYPE and how it interprets linebreaks in your code.

This won't cause this issue:

<td><img src="whatever /></td>

This will:

<td>
    <img src="whatever" />
</td>

Looks like when jQuery appends the img node, it formats the code in such a way to cause this issue.

Your problem has nothing to do with page refresh. For the CSS 'top' and 'left' values to work, you must have CSS 'position' set to absolute, relative or fixed, but you don't show this. My guess is "relative", in which case, the space allocated for the image in its original position remains, even after the image itself has been shifted.

You may be able to remove this by setting a margin-right value on the img equal to minus the width of the image.