Question

我有一个包含trs和tds的表标签。在运行时，我将一个图像添加到其中一个tds，同时将其移动到与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";},
                 });

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

提前致谢，

Answer 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
});

Answer 2

我保留了我的另一个答案，因为我可以看到它对另一个人有用，但这基本上是你对特定情况的需要：

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节点时，它会以一种导致此问题的方式格式化代码。

Answer 3

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

您可以通过在img上设置右边距值等于减去图像宽度来删除它。

修改TD后刷新TR

3 个答案: