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

Question

我有以下结构：

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

我想在那之后动态插入图像，然后将其放置在 input中，如下所示：

$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>​

关键是做TD position: relative;，然后有形象position: absolute。这将使图像相对于td.