通过js控制节点显隐

js：

<script type="text/javascript">
<!--
function collpasecontrol_clickdetail_DIV(){
    var display = document.getElementById('tableNote').style.display;
    if(display=='none'){
    document.getElementById('tableNote').style.display='block';
    document.getElementById('collpasecontrol_detail_DIV_image').src='${ctx}/images/ns_minus.gif';
    }
    else {
        document.getElementById('tableNote').style.display='none';
        document.getElementById('collpasecontrol_detail_DIV_image').src='${ctx}/images/ns_plus.gif';
    }
}
function collpasecontrolNoteDeatail(target)
{
    var sTable = document.getElementById("tableNote");
    
    for(var i=0;i<sTable.rows.length;i++ )
    {
        if (sTable.rows[i].cells[0]==target) //判断是否当前选定行
        {
            obj = document.getElementById(sTable.rows[i+1].id);
            
            if(obj!=null){
                id=sTable.rows[i+1].id;
                id=id.substring(id.indexOf('_'));
                img = document.getElementById("imgDeatail"+id);
                if(img!=null)
                {
                    if(obj.style.display=='none')
                    {
                        img.src='${ctx}/images/ns_minus.gif';
                        obj.style.display='';
                    }
                    else
                    {
                        img.src='${ctx}/images/ns_plus.gif';
                        obj.style.display='none';
                    }
                }
            }
            
        }
    }
}

</script>

jsp：

<table class="oppage" cellspacing=1 cellpadding=2 width="100%" border=0>
    <tr align="center" style="height:1px;background-color:#b8b8b8" ></tr>
    
    <tr>
        <th height="25px" colspan="4" style="text-align: left;">
            <table>
            <tr><th onclick="collpasecontrol_clickdetail_DIV()">
            <img id="collpasecontrol_detail_DIV_image" src="${ctx }/images/ns_minus.gif"/></th>
            <th>Milestone Note &nbsp; (<a href="javascript:addTicketNode()">Add Note</a>)</th>
            </tr>
            </table>
        </th>
    </tr>
</table>

<table id="tableNote" class="oppage" cellspacing=1 cellpadding=2 width="100%" border=0>
        <c:forEach var="note" items="${entity.notes}" varStatus="vstatus">
            <tr >
                <th width="4%" height="25px" onclick="collpasecontrolNoteDeatail(this)">
                <img id="imgDeatail_${vstatus.index  }" src="${ctx }/images/ns_minus.gif"/></th>
                <td width="30%">
                <c:choose>
                   <c:when test="${note.username=='SH,GCSC'}">
                   CTA Global Customer Service Center
                   </c:when>
                   <c:otherwise>
                     ${note.username }
                   </c:otherwise>
                </c:choose></td>
                <th width="20%" height="25px">Update Time:</th>
                <td width="30%">${note.createtime }</td>
            </tr>
            <tr id="tr_${vstatus.index }">
                <td colspan="4"><span class='wordbreak'>${note.note}</span></td>
            </tr>
    </c:forEach></table>

其中需要注意的是：varStatus，没接触过的，可以先查下，这是c foreach标签中

在该页面中，我通过varStatus的index动态给tr的id赋值