没有父调整大小的jQuery插入元素

Question

我有以下结构：

<td>
  <input name="foo" size="45"/>
</td>

我希望在此之后动态插入图像，然后将放在输入中，如下所示：

$j('<img class="icon-ketchup" style="display: none; position: relative; right: 35px; top: 7px;" src="http://localhost:82/pod/plugin_assets/webshop/images/icons/cross.png" />').show().insertAfter($j('input'));

我的td与input的尺寸相同，我不想调整td元素的大小。这怎么可能实现？

Answer 1

你需要用绝对定位它。不需要Javascript，但仍可以使用它。见http://jsfiddle.net/C7trn/

HTML

<td style="position: relative; border: 2px solid black; padding: 5px;">
<input name="foo" size="45"/>
<img class="icon-ketchup" style="position: absolute; right: 5px; top: 7px;" src="http://localhost:82/pod/plugin_assets/webshop/images/icons/cross.png" />
</td>​

关键是制作道明position: relative;，然后是图片position: absolute。这将使图像相对于td绝对定位。