項目中的一個展開隱藏回覆的功能

客戶的不斷變更是我提高技術的動力！
實現了一個瀏覽回覆帖的功能，回覆的信息也可以回覆，只要在servlet給他返回html代碼了，幸好不是太麻煩。
首先是頁面部分，包括了很多struts標籤
[code]<div class="left_box">
<logic:empty name="infoBean" property="infoList">
對不起，沒有您想要的記錄！
</logic:empty>
<logic:iterate id="info" name="infoBean" property="infoList">
<fieldset>
<table cellspacing="1" width="100%" border="1">
<tr>
<td rowspan="4" width="70">
<logic:match name="info" property="tpye" value="A">
貨源信息
</logic:match>
<logic:match name="info" property="tpye" value="B">
車源信息
</logic:match>
<logic:match name="info" property="tpye" value="C">
其它信息
</logic:match>
<br/>
<img id="<bean:write name='info' property='lnid'/>" src="images/plus.gif" onClick="openList(this.id);"/>信息號<bean:write name="info" property="lnid"/><br/>
<a href="../front/infoReplayForm.shtml?pnid=<bean:write name='info' property='lnid'/>">留言</a>
</td>
<td rowspan="2" width="500" valign="top">
<bean:write name="info" property="sdty"/> 
<bean:write name="info" property="nmbr"/><bean:write name="info" property="uom"/> 
有效天數:<bean:write name="info" property="dkco"/>  
<bean:write name="info" property="dsc"/>
</td>
<td width="80">發佈公司：</td>
<td><bean:write name="info" property="dkco"/> </td>
</tr>
<tr>
<td>發佈人：</td>
<td><bean:write name="info" property="bcusr"/> </td>
</tr>
<tr>
<td>起始地：<bean:write name="info" property="adss"/>  <bean:write name="info" property="adssn"/></td>
<td>聯繫方式：</td>
<td><bean:write name="info" property="rltv"/> </td>
</tr>
<tr>
<td>終止地：<bean:write name="info" property="adse"/>  <bean:write name="info" property="adsen"/></td>
<td>發佈時間：</td>
<td><bean:write name="info" property="bcdat" format="yyyy-MM-dd"/> </td>
</tr>
<tbody id="s<bean:write name='info' property='lnid'/>"></tbody>
</table>
</fieldset>
</logic:iterate>
<logic:notEmpty name="infoBean" property="infoList">
<fieldset>
<table cellspacing="1" width="100%">
<tr><td><cochang:paginate name="infoBean" list="infoList"/></td></tr>
</table>
</fieldset>
</logic:notEmpty>
</div>
[/code]

然後是javascript部分，比較簡單，一是需要把加號替換一下，再就是請求servlet返回html代碼填充到tbody中

[code]function openList(id) {
var image = document.getElementById(id);
var imagesrc = image.src;
if(imagesrc.indexOf("plus")>0){
image.src="images/nofollow.gif";
var params = "id=" + id;
var url = '../fore/infoServlet';
var myAjax = new Ajax.Updater('s'+id, url, {method: 'get', parameters: params});
}else if(imagesrc.indexOf("nofollow")>0){
image.src="images/plus.gif";
$('s'+id).innerText="";
}
}[/code]
下面是servlet部分，一口氣代碼全部貼上。
[code]public class InfoServlet extends BaseAjaxServlet {

InfoService infoService;

public void init() throws ServletException {
super.init();
this.infoService = (InfoService)CustomBeanFactory.getBean("infoService");
}

public String performTask(HttpServletRequest request, HttpServletResponse response) {
String id = request.getParameter("id");
String result = " 可能發生錯誤，請與管理員聯繫！";
if(!id.equalsIgnoreCase("")){
result = searchInfo(id);
}

return result;
}

public String searchInfo(String id) {
List infos = infoService.searchByPnid(id);
Info info = new Info();
StringBuffer string = new StringBuffer(200);
if(infos.size() == 0) {
return " 沒有任何留言!";
}
string.append(" ");
for(int i=0;i<infos.size();i++) {
info = (Info)infos.get(i);
string.append("<tr><td><img id='"+info.getLnid()+"' src='images/plus.gif' onClick='openList(this.id);'/><a href='../front/infoReplayForm.shtml?pnid="+info.getLnid()+"'>留言</a></td><td>");
string.append(info.getLnid());
string.append("</td><td>");
string.append(info.getDsc());
string.append("</td></tr><tbody id='s"+info.getLnid()+"'></tbody></td></tr>");
}
string.append("</table></td></tr>");
return string.toString();
}
}[/code]
最後還是一個效果圖，視覺纔是最直觀的。