1

我有一个包含 trs 和 tds 的表格标签。在运行时,我将图像添加到其中一个 td 并同时移动它以覆盖 td 中的旧数据。这很好地显示了图像叠加,但是 td 的大小一旦改变就不会恢复到适当的水平。现在图像已经移动,空间在 td. 我希望能够重绘或刷新 tr 以正确显示数据。我尝试更改 td 的样式属性,以便系统被迫刷新页面。但没有变化。请帮我解决一下这个。

    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 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";},
                 });

上面的代码正确设置了重叠,但图像移动后剩余的空间不会被删除。

提前致谢,

4

3 回答 3

1

在 td 事件上设置触发器,在 tr 事件上设置监听器:

$(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
});
于 2011-07-05T05:51:39.830 回答
0

您的问题与页面刷新无关。要使 CSS 'top' 和 'left' 值起作用,您必须将 CSS 'position' 设置为绝对、相对或固定,但您不显示此内容。我的猜测是“相对的”,在这种情况下,即使在图像本身移动之后,为其原始位置分配的图像空间仍然存在。

您可以通过在 img 上设置一个等于减去图像宽度的 margin-right 值来删除它。

于 2011-07-05T13:17:50.220 回答
0

我保留我的另一个答案,因为我可以看到它对另一个人有用,但这本质上是您在特定情况下所需要的:

CSS:

    td img {
        vertical-align:bottom;
    }

就那么简单 ;)

这是一个例子:http: //jsfiddle.net/AlienWebguy/SQGwa/5/

实际问题是由 DOCTYPE 以及它如何解释代码中的换行符引起的。

这不会导致此问题:

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

这将:

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

看起来当 jQuery 附加 img 节点时,它会以导致此问题的方式格式化代码。

于 2011-07-05T06:28:20.823 回答