- Dynamic Titles
- Dynamic Tables
- Dynamic Forms
- A Configurable Home Page
- Summary
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Dynamic Tables
Many Web sites depend on the ability to generate tables dynamically, which consists of controlling the TR and TD tags within a TABLE. The online stock portfolio mentioned earlier is a good example where dynamic tables are useful.
The following example shows how to generate five rows without having to code each one of them:
@lt;TABLE@gt;
@lt;% for(int row=1; row@lt;=5; row++) { %@gt;
@lt;TR@gt;
@lt;/TR@gt;
@lt;% } %@gt;
@lt;/TABLE@gt;
Ten columns can be added for each row by nesting another for loop within the TR tag, as follows:
@lt;TABLE@gt;
@lt;% for(int row=1; row@lt;=5; row++) { %@gt;
@lt;TR@gt;
for(int col=1; col@lt;=10; col++) { %@gt;
@lt;TD@gt; (@lt;%=col%@gt;, @lt;%=row%@gt;)
@lt;/TD@gt;
@lt;/TR@gt;
@lt;% } %@gt;
@lt;/TABLE@gt;
Each cell contains its row and column numbers as the tuple (col, row).
Listing 2 shows how tables can be generated dynamically. The JSP provides two INPUT fields to define the width and height of the dynamic table. When the user submits the form, the JSP processes the request and generates the table on the fly. Each cell of the table has a unique background color and text based on the row and column of the cell.
Listing 2 dynamicTable.jsp
1: @lt;HTML@gt;@lt;HEAD@gt;@lt;TITLE@gt;A Colorful and Dynamic Table@lt;/TITLE@gt;@lt;/HEAD@gt;
2: @lt;BODY@gt;
3: @lt;CENTER@gt;
4: @lt;H1@gt;Colorful and Dynamic Table@lt;/H1@gt;
5: @lt;FORM METHOD=POST ACTION=dynamicTable.jsp@gt;
6: Table Width (@lt;16) = @lt;INPUT TYPE=TEXT NAME=WIDTH VALUE=15 SIZE=2@gt;,
7: Table Height (@lt;16) = @lt;INPUT TYPE=TEXT NAME=HEIGHT VALUE=5 SIZE=2@gt;,
8: @lt;INPUT TYPE=SUBMIT VALUE="Do it !"@gt;
9: @lt;/FORM@gt;
10: @lt;HR@gt;
11: @lt;% String w = request.getParameter("WIDTH");
12: String h = request.getParameter("HEIGHT");
13: if(w == null) w = "5";
14: if(h == null) h = "15";
15: int width = Integer.parseInt(w);
16: int height = Integer.parseInt(h);
17: if(width@gt;15) width = 15;
18: if(width@lt;0) width = 0;
19: if(height@gt;15) height = 15;
20: if(height@lt;0) height = 0;
21: String[] colorArray = { "00", "11", "22", "33",
22: "44", "55", "66", "77",
23: "88", "99", "AA", "BB",
24: "CC", "DD", "EE", "FF" }; %@gt;
25: @lt;TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0@gt;
26: @lt;% for(int y=0; y@lt;=height; y++){ %@gt;
27: @lt;TR@gt;
28: @lt;% for(int x=0; x@lt;=width; x++){
29: String bgColor = "AA" + colorArray[y] + colorArray[x]; %@gt;
30: @lt;TD BGCOLOR=@lt;%=bgColor%@gt;@gt;
31: (@lt;%=x%@gt;, @lt;%=y%@gt;)
32: @lt;/TD@gt;
33: @lt;% } %@gt;
34: @lt;/TR@gt;
35: @lt;% } %@gt;
36: @lt;/TABLE@gt;
37: @lt;HR@gt;
38: @lt;/CENTER@gt;
39: @lt;/BODY@gt;@lt;/HTML@gt;
Lines 5 through 9 declare a FORM to set the width and height of the table. They have been limited to less than 16 since these values are then used to choose a hexadecimal-based color system. The input fields declare a default table size of 5 rows of 15 columns each. The values of the fields are then accessed from the request object in lines 11 and 12. If they are not null, the value is used to set the values of variables width and height.
Lines 17 through 20 make sure that the values are within 0 and 15. Line 21 declares a colorArray based on hexadecimal values from 00 to FF. Line 25 declares the table. The for loop in line 26 declares a height number of rows. For each row, the for loop in line 28 declares a width number of columns. Each cell is declared with a unique background color. The background color, bgColor, is created in line 29, and the cell's color is defined in line 30. The cell contains the string (x, y), where x is the current column and y is the row.
Figure 2 shows the output of dynamicTable.jsp with a width and height of 15.
){kind=link}
dynamicTable.jsp produces a dynamically colorful table.