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

     <s:iterator value="pm.datas" id="msg"> 
          <p> 主题: 
          <s:property value="title"></s:property>
        &nbsp;发表于&nbsp;
          <s:property value="date"></s:property>
        &nbsp;by&nbsp;
          <s:property value="user.username"></s:property>
        &nbsp;&nbsp;
          <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标签，因此在这里提问。

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

4 个解决方案

#1

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

#2

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

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

#3

还有一种思路就是， 不使用定位技术， 而是使每个迭代元素都有一个<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表单覆盖了后面的内容，就不好看了）？

#4

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

页面中， <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);'>&nbsp;&nbsp;";
       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); 写法有点问题， 不过，大问题已经解决。这个我再纠正一下啊。