Displaying a table with in a table with DWR data

Hi,
here is my requirement.i have a main table, with a + beside every row. when the user clicks on + another table should be displyed with in the first table.

I am using DWR to dynamically generate the data for the second table based on value where user clicks +. the callback function in DWR hold the list of data.My problem is how to display the data in a table format(with table header and table data) any ideas will highly appreicted. Here is my JSP.

<%@ page language="java"%>
<%@ taglib uri="/WEB-INF/struts-bean.tld" prefix="bean"%>
<%@ taglib uri="/WEB-INF/struts-html.tld" prefix="html"%>
<%@ taglib uri="/WEB-INF/struts-logic.tld" prefix="logic"%>
<%@ taglib uri="/WEB-INF/struts-nested.tld" prefix="nested"%>
<%@ taglib uri="/WEB-INF/struts-layout.tld" prefix="layout"%>
<%@ taglib uri="/WEB-INF/c.tld" prefix="c"%>
<html>
 
<head>
<title>Programming LookUp Results</title>
 
<style type="text/css">
 
#div1 {
border: 1px solid black;
padding: 2px;
overflow: hidden;
width: 875px;
height: 30px;
background:gray;
}
 
#div2 {
border: 1px solid black;
padding: 2px;
overflow: auto;
width: 875px;
height: 300px;
}
 
#hiddenRow {
 display:none;
 visibility:hidden;
}
#visibleRow {
 display:;
 visibility:visible;
}
 
</style>
 
</head>
<script type='text/javascript' src='/GFSConfigurationTool/dwr/interface/DWRFacade.js'></script>
<script type='text/javascript' src='/GFSConfigurationTool/dwr/engine.js'></script>
 
<script type='text/javascript' src='/GFSConfigurationTool/dwr/util.js'></script>

<script language="JavaScript">
 
function update(index){
alert("In the update");
 
var name = dwr.util.getValue(document.getElementById(index));
dwr.util.setValue(index,"");
DWRFacade.lookUpExtraConfigResults(name, gotResults); 
 
}
 
function gotResults(programmingExtraResults){
var reciptResults=new Array();
var output = "";
 
alert("results "+programmingExtraResults);
for (var j = 0; j < programmingExtraResults.length; j++)
{   alert("In the FOR LOOP of gotResultsFN")

output += "<tr class='\tr" + (j%2) + "'\ id='\2'\>";
var item = programmingExtraResults[j];
    alert("Category"+programmingExtraResults[j].category);
alert("svnkit"+programmingExtraResults[j].progKit);
alert("version"+programmingExtraResults[j].version);
alert("creationDate"+programmingExtraResults[j].creationDateExtra);
 
alert("xcvrNO"+programmingExtraResults[j].xcvrNO);
alert("filePath"+programmingExtraResults[j].filePath);
alert("fileName"+programmingExtraResults[j].fileName);
alert("type"+programmingExtraResults[j].type);

output += "<td class='col0'>" + programmingExtraResults[j].progKit + "</td>";
   output += "<td class='col1'>" + programmingExtraResults[j].xcvrNO + "</td>";
   output += "<td class='col2'>" + programmingExtraResults[j].category + "</td>";
   output += "<td class='col3'>" + programmingExtraResults[j].type + "</td>";
   output += "<td class='col4'>" + programmingExtraResults[j].filePath + "</td></tr>";
   
   output += "<td class='col5'>" + programmingExtraResults[j].fileName + "</td>";
   output += "<td class='col6'>" + programmingExtraResults[j].version + "</td>";
   output += "<td class='col7'>" + programmingExtraResults[j].comment + "</td>";
   output += "<td class='col8'>" + programmingExtraResults[j].creationDateExtra + "</td>";
 
}

}
javascript:window.history.forward(1);
 
</script> 
<script type="text/ecmascript" src="js/syncscroll.js"></script>
 
<script>
 
</script>
 
 
 
 
 
<script type="text/javascript">
 
function toggleMenu(list, img){
 
    var listElement = document.getElementById(list);
 
    listElement.style.display = (listElement.style.display == "none") ? "block" : "none";
  
    img.src = (img.src == "images/expand.gif") ? "images/collapse.gif" : "images/collapse.gif";
    
}
 
function showHide(list,img) {
if (document.getElementById(img).src.indexOf('expand') != -1) {
document.getElementById(img).src='/images/collapse.gif';
document.getElementById(list).className='visibleRow';
} else {
document.getElementById(img).src='/images/expand.gif';
document.getElementById(list).className='hiddenRow';
}
}
 
 
 
function toggletable(list){
 alert("In the toggle menu LIST"+list);
    var listElement = document.getElementById(list);
 var table=document.getElementById(table);
   alert("In the toggle menu TABLE "+ table);
    if(listElement.style.display=="none")
    {
      alert("In the toggle IF LOOP menu TABLE "+ table);
    table.style.display="block";
    }
    else
    {
     alert("In the toggle ELSE LOOP menu TABLE "+ table);
    table.style.display="none";
    }
   
    
}
</script>
<script>
      var toggledDisplay = new Object();
    toggledDisplay['sub1'] = true;
    toggledDisplay['sub2'] = true;
    toggledDisplay['sub3'] = true;
 
function toggleDisplay(bDisplayed)
{
 
  if(!document.getElementById || toggleDisplay.arguments.length < 2) return;
  var displayed = new Object();
      displayed['true'] = 'block';
      displayed['false'] = 'none';
  for(var i = 1; i < toggleDisplay.arguments.length; i++)
  {
    oDisplay = document.getElementById(toggleDisplay.arguments[i]);
    
    if(oDisplay)
    {
      oDisplay.style.display = displayed[bDisplayed];
      // mozilla is the only browser out of the lot that can't get this right.  so, if we're
      // setting an object's display style to block, we gotta reload any images contained
      // within that block.  mozilla won't do it for you like every other browser that
      // supports the functionality of changing the display style dynamically.
      // begin crap browser hack
      if(bDisplayed)
      {
    
        oImages = oDisplay.getElementsByTagName('IMG');
        
        for(var j = 0; j < oImages.length; j++)
          oImages[j].src = oImages[j].src;
      }
      // end mozilla, err, crap browser hack
       if(typeof toggledDisplay[toggleDisplay.arguments[i]] != 'undefined')
        toggledDisplay[toggleDisplay.arguments[i]] = !bDisplayed;
    }
  }
}
 
</script>
<script language="javascript"> 
  function toggle_it(itemID){ 
      // Toggle visibility between none and inline 
      if ((document.getElementById(itemID).style.display == 'none')) 
      { 
        document.getElementById(itemID).style.display = 'inline'; 
      } else { 
        document.getElementById(itemID).style.display = 'none'; 
      } 
  } 
  
   
  
  
    function toggle(target)
     {
         obj=document.getElementById(target);
         obj.style.display=( (obj.style.display=='none') ? '' : 'none');
     }
    
  
</script> 
 
 
<body>
<jsp:include page="/jsp/motoHeader.jsp"/><br/>
<center>
<jsp:useBean id="sessionForm" scope="request" class="com.mot.programming.forms.ProgrammingLookUpForm"/>
<jsp:useBean id="results" scope="request" class="java.util.ArrayList"/>
<jsp:useBean id="resultsExtra" scope="request" class="java.util.ArrayList"/>
 
<ul>
<font color="red" size ="4">
<html:messages id="msg" message="true">
<li>
<bean:write name="msg"/>
</li>
</html:messages>
</font>
</ul>
<br/><br/>
 
<font size="5" color='#2B60DE'><h3><u>Programming Configuration Look-Up Results</u></h3>
</font>
</br><br/>
<table>
 
<tr><td>
<h3>PRODUCT FAMILY</h3>
</td><td>
<html:text name="ProgrammingLookUpForm" property="family" size="20" style="text-transform:uppercase" disabled="true">
</html:text>
</td><td>
<h3>TECHNOLOGY</h3>
</td><td>
<html:text name="ProgrammingLookUpForm" property="tech" size="20" style="text-transform:uppercase" disabled="true"> 
</html:text>
</td></tr>
 
<tr><td>
<h3>SVN KIT</h3>
</td><td>
<html:text name="ProgrammingLookUpForm" property="svnkit" size="20" style="text-transform:uppercase" disabled="true">
</html:text>
</td>
<td>
<h3>RECIPE</h3>
</td><td>
<html:text name="ProgrammingLookUpForm" property="recipe" size="20" style="text-transform:uppercase" disabled="true">
</html:text>
</td>
</tr>
</table>
</br><br/><br/>
<div id="div1">
<table width=1900  border="2">
<TR>
<th width=100/>PROG EXTRA
<th width=100 />PROGKIT
<th width=100/>CREATE DATE
 
<th width=100 />RECIPE
<th width=100/>PROD FAMILY
 
<th width=100/>TECH
<th width=150/>LANG
<th width=200/>FLEXVER
 
<th width=150 />FLASHVER
<th width=100/>FLEXFILE
<th width=400/>FLASHFILE
 
</tr>
</table>
</div>
 
 
<div id="div2">
<table width = 1900 border = "2">
 
<logic:iterate id="log" name="results" type="com.mot.programming.VO.ProgrammingLookUpVO" indexId="index">
<TR BGCOLOR="FF9900">
 
<%
int count=1001;
%>  
<TR BGCOLOR="#D8D8D8">
<td width=100>
 
<IMG NAME="Site_Management_IMG" SRC="images/expand.gif" onklick="update('<%=count %>');toggletable('<%=index %>');toggleMenu('<%=index %>','this');toggleDisplay(toggledDisplay['<%=index %>'], '<%=index %>');" width="15" height="15"/></td>
<td width=100>
 
<c:out value="${log.progKit}"/>
</td>
 
<td width=100>
<c:out value="${log.creationDate}"/>
</td>
 
<td width=100>
<c:out value="${log.recipe}"/>
</td>
<td width=100>
<c:out value="${log.family}"/>
</td>
 
<td width=100>
<c:out value="${log.tech}"/>
</td>
<td width=150>
<c:out value="${log.lang}"/>
</td>
 
<td width=200>
<c:out value="${log.flexver}"/>
</td>
<td width=150>
<c:out value="${log.flashver}"/>
</td>
<td width=100>
<c:out value="${log.flexFile}"/>
</td>
<td width=400>
<c:out value="${log.flashFile}"/>
</td>
 
</tr>
<div id ="div3">
<tr  style="display:none" id="<%=count %>" >
 
<th width=100  />
<th width=100/>PROGKIT
<th width=100  />XCVR_NO
<th width=100 />CATEGORY
<th width=100 />TYPE
<th width=100 />FILE_PATH
<th width=100 />FILE_NAME
<th width=100 />VERSION
<th width=100 />COMMENT
<th width=100 />CREATED_DT

<logic:iterate id="extra" name="results" type="com.mot.programming.VO.ProgrammingLookUpVO" indexId="index">
 
<tbody id="extraConfigResultsTableBody">
 
   <%
   count++;
   %>
 
   </logic:iterate>  
 
 
 
 </div>
    
</logic:iterate>
</table>
</div>
<br/><br/>
<html:form action="/Programming1.do?method=progList">
<html:submit value="Programming Configuration MENU"></html:submit>
</html:form>
<br/>
<html:form action="/Programming1.do?method=lookUp">
 
<html:submit value="BACK"></html:submit>
</html:form>
<br/>
<html:form action="/TacCode.do?method=mainConfiguraion">
<html:submit value="Main Configuration MENU"></html:submit>
</html:form>
 
</center>   
<br/><br/><br/><jsp:include page="/jsp/motoFooter.jsp"/>
</body>
</html>

[BPSouther: Added code tags]
[ November 20, 2008: Message edited by: Ben Souther ]