关于Struts2: 在 s:iterator中 动态插入内容 的问题

[影儿]

<s:iterator value="pm.datas" id="msg">
<p> 主题:
<s:property value="title"></s:property>
 发表于 
<s:property value="date"></s:property>
 by 
<s:property value="user.username"></s:property>
  
<a href="" onclick="return toReply(${msg.id});">
<font size="2pt" color="#EE4000">
回复该留言</font></a></p>
<p> 内容:
<s:property value="content"></s:property></p>
<div id="replyarea"></div>
<hr><br/>
</s:iterator>


上面是一段 遍历容器代码，使用 Struts2 的 s:iterator 标签。你可能看到了， 下面是有一段
<div id="replyarea"></div>

其视图如下：

主题： XXX 发表于 XXX 回复该留言【超链接】
内容： XXX

<div 区域>
replyarea【当点击“回复该留言”链接时，在这里显示form表单】
</div 区域>

我的意图是： 当我点击某条留言的“回复该留言”时，将在该留言“内容”下面的replyarea区域中显示一段form表单。form 表单的编写已经解决。

问题是，当我点击某条留言的“回复该留言时”， 它总是在第一条留言内容的下面显示form表单，而不是在相应留言的内容下面显示。也就是说，form表单的显示位置有问题。

到底应该怎么做，才能使其在所选择的留言的内容下面的位置上显示form表单？ 这个问题似乎与CSS定位有关，但又牵扯到struts标签，因此在这里提问。

望各位大虾不吝赐教。小弟在线等……

[tracyXiaoAi]

当点击回复该留言的时候，得到触发这个事件的对象，然后获得该对象的坐标，你通过计算后，就可以把那个Form定位到触发这个事件的对象之下呀。

[影儿]

问题是，采用什么定位呢？ 因为留言内容下面原来是空的， 当点击链接时， 将“凭空”出现一个form 表单， 这个表单有可能覆盖掉下面的留言内容。

采用怎样的定位，才能使表单定位到相应的位置上，同时，使后面的留言自动地向下挪移呢？
绝对定位基本是不可能的； 相对定位的话，我先试试，不知道能不能使后面的留言因为表单的出现而自动向下移动。

[影儿]

还有一种思路就是， 不使用定位技术， 而是使每个迭代元素都有一个<div id="replyarea[i]", class="replyarea">；每个 <div>元素 与 每个被迭代的元素msg 绑定起来。这样，点击每个msg时，可以在对应的迭代元素相应的<div></div> 自动插入 form 表单。 不过这种思想，如何根据迭代的元素标记实现 <div id="replyarea[i]"> 呢？

<div id="replyarea"+"${msg.id}"></div> ?

然后在 js 中

var replyarea = document.getElementById("replyarea" + msgId); 这里 msgId = ${msg.id} 可以通过参数传进来？

感觉 CSS 定位还是比较简单， 只要一个 div 元素， 关键是， 如何将 div 定位到相应留言内容的下面，而使后面的留言自动下移（以免生成的form表单覆盖了后面的内容，就不好看了）？

[影儿]

问题解决了。虽然有点笨拙， 呵呵

页面中， <div id="replyarea${msg.id}"></div> 仍然放入 <s:iterator> 里面， 就如上面一样，不过 id 号后面增加了 ${msg.id} 使得每个 div 跟每条留言绑定；

然后在 js 中：

function toReply(msgId)
{
var str="";
str += "<form action='saveReply.action?msgId="+ msgId + "'" + " method='post'>";
str += "<textarea name='reply.content' id='replytext' col='45' row='10'></textarea>";
str += "<input type='button' value='取消'> onclick='return cancel(msgId);'>  ";
str += "<input type='submit' value='提交' onclick='return validateReply();'>"
str += "</form>";
var areapos = "replyarea"+msgId;
var replyarea = document.getElementById(areapos);
var replytext = document.getElementById("replytext");
replyarea.innerHTML = str;

return false;
}

return cancel(msgId); 写法有点问题， 不过，大问题已经解决。这个我再纠正一下啊。