Dynamically construct a page with a layout of 2 grids per row and 'n' rows

I need to construct a page whose content may change based on what the user has selected. The page may have one or more grids. The grids will be layed out two in a row with 'n' rows.

My initial thoughts were to write the page using DOM. For example,

mytable = document.createElement("TABLE");
mytablebody = document.createElement("TBODY");
var mycurrent_row;
for(j=0;j<tableCnt;j++) {
if (f==0) mycurrent_row=document.createElement("TR");
mycurrent_cell=document.createElement("TD");
// currenttext=document.createTextNode("grid"+ j);
// mycurrent_cell.appendChild(currenttext);
// mycurrent_row.appendChild(mycurrent_cell);
document.write(obj);
if (f==1) {
mytablebody.appendChild(mycurrent_row);
f=0;
}
else {
f++;
}
}

But, I don't believe the document.write(obj) is correct. The result is one table per row. Is there a call to get the grid as a DOM element so I can pass it to appendChild()?

The second option was to embed javascript inside a table.
<TABLE><TR>
<TD> grid 1 </TD></TR>
<TD> grid 2 </TD></TR>
</TABLE>
But, this also produces the grids aligned vertically (one per row). I also tried putting the grid inside another table.

Does anyone have any suggestions on how I can achieve dynamically constructing a page layout as I've described?

I opted for the second option as shown below.

<!-- write tables in a 2xN layout -->
<TABLE width="100%" height="100%">
<%
int f=0;
for(int j=0;j<5;j++) {
f = j % 2;
if (f==0) { %>
<TR>
<% } %>
<% if (f==0) { %>
<TD><TABLE height="250" width="400"><TR><TD>
<SCRIPT>document.write(obj);</SCRIPT>
</TD></TR></TABLE></TD>
<% }
else { %>
<TD><TABLE height="250" width="400"><TR><TD>
<SCRIPT>document.write(obj1);</SCRIPT>
</TD></TR></TABLE></TD>
<%}%>
<%
if (f!=0) { %>
</TR>
<% }
}
%>

What happens now is when I resize the columns the change takes effect in all grids. It appears the layout of all grids is based on the first one. I also can't click on grid rows other than the first grid. The first grid is the only one with scroll bars. I expected them to all have scrollbars because my test case uses the same data. I must be missing something. Hopefully someone can see what I've done wrong.

I have one style called "grid1". I have two grids held in obj and obj1. See script below.

<SCRIPT>
var obj = new Active.Controls.Grid;

var alternate = function(){
return this.getRowProperty("order") % 2 ? "#C7D0FE" : "#F0F0F0";
}

obj.setId("grid1");
var row = new Active.Templates.Row;
row.setStyle("background", alternate);
obj.setTemplate("row", row);
obj.setRowProperty("count", myData.length);
obj.setColumnProperty("count", myColumns.length);
obj.setDataProperty("text", function(i, j){return myData[i][j]});
obj.setColumnProperty("text", function(i){return myColumns[i]});
obj.setRowHeaderWidth("28px");
obj.setColumnHeaderHeight("20px");

</SCRIPT>
var obj1 = new Active.Controls.Grid;
obj1.setId("grid1");
var row1 = new Active.Templates.Row;
row1.setStyle("background", alternate);
obj1.setTemplate("row", row1);
obj1.setRowProperty("count", myData1.length);
obj1.setColumnProperty("count", myColumns1.length);
obj1.setDataProperty("text", function(i, j){return myData1[i][j]});
obj1.setColumnProperty("text", function(i){return myColumns1[i]});
obj1.setRowHeaderWidth("28px");
obj1.setColumnHeaderHeight("20px");
</SCRIPT>

The style is.
<style>
#grid1 {width: 200px; align="center"}

.active-controls-grid {height: 100%; font: menu; }
.active-column-0 {width: 50px;}
.active-column-1 {width: 100px;}
.active-column-2 {width: 150px;}
.active-column-3 {width: 150px;}
.active-grid-column {border-right: 2px solid threedlightshadow; }
.active-grid-row {border-bottom: 2px solid threedlightshadow;}

/* column headers */
.active-templates-header {
color: black; background: green;
}

/* row headers */
.active-templates-item {
text-align: right;
color: black;
}
</style>

I found the problem. I need to assign different ids to each grid. For example, grid1 and grid2.