项目中的一个展开隐藏回复的功能

客户的不断变更是我提高技术的动力！
实现了一个浏览回复帖的功能，回复的信息也可以回复，只要在servlet给他返回html代码了，幸好不是太麻烦。
首先是页面部分，包括了很多struts标签

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

然后是javascript部分，比较简单，一是需要把加号替换一下，再就是请求servlet返回html代码填充到tbody中

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="";    
    }    
}

下面是servlet部分，一口气代码全部贴上。

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();    
    }    
}

最后还是一个效果图，视觉才是最直观的。