October 24, 2014
Hot Topics:
RSS RSS feed Download our iPhone app

JSP: Creating Dynamic Tables

  • March 26, 2001
  • By Stephanie Kaminaris, Jose Annunziato
  • Send Email »
  • More Articles »

Generating dynamic content in Web applications is important when the content must reflect the most current and available data and personalized information. One of the main advantages of JavaServer Pages is the ability to generate dynamic content.

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:

<TABLE>
<% for(int row=1; row <= 5; row++) { %>
    <TR>
    </TR>
<% } %>
</TABLE>

Ten columns can be added for each row by nesting another for loop within the TR tag as follows:

<TABLE>
<% for(int row=1; row <= 5; row++) { %>
    <TR>
<%      for(int col=1; col<=10; col++) { %>
        <TD> (<%=col%>, <%=row%>)
        </TD>
        <% } %>
    </TR>
<% } %>
</TABLE>

Each cell contains its row and column numbers as the tuple (col, row).

The following listing 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 1: dynamicTable.jsp

 1: <HTML><HEAD><TITLE>A Colorful and Dynamic Table</TITLE></HEAD>
 2: <BODY>
 3: <CENTER>
 4: <H1>Colorful and Dynamic Table</H1>
 5: <FORM METHOD=POST ACTION=dynamicTable.jsp>
 
6: Table Width  (<16) = <INPUT TYPE=TEXT NAME=WIDTH  VALUE=15 SIZE=2>,
 
7: Table Height (<16) = <INPUT TYPE=TEXT NAME=HEIGHT VALUE=5  SIZE=2>,
 8: <INPUT TYPE=SUBMIT VALUE="Do it !">
 9: </FORM>
10: <HR>
11: <%  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>15)  width  = 15;
18:     if(width<0)   width  = 0;
19:     if(height>15) height = 15;
20:     if(height<0)  height = 0;
21:     String[] colorArray  = { "00", "11", "22", "33",
22:           & nbsp;           & nbsp;     "44", "55", "66", "77",
23:           & nbsp;           & nbsp;     "88", "99", "AA", "BB",
24:           & nbsp;           & nbsp;     "CC", "DD", "EE", "FF"  };  %>
25: <TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0>
26: <%  for(int y=0; y<=height; y++){    %>
27:         <TR>
28: <%      for(int x=0; x<=width; x++){
29:           & nbsp; String bgColor = "AA" + colorArray[y] + colorArray[x];    %>
30:           & nbsp; <TD BGCOLOR=<%=bgColor%>>
31:           & nbsp; (<%=x%>, <%=y%>)
32:           & nbsp; </TD>
33: <%      }           & nbsp;           %>
34:         </TR>
35: <%  }           & nbsp;           & nbsp;   %>
36: </TABLE>
37: <HR>
38: </CENTER>
39: </BODY></HTML>

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 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 1 shows the output of dynamicTable.jsp with a width and height of 15.

Figure 1 dynamicTable.jsp produces a dynamically colorful table.

Summary

There are many ways to use JSPs to generate dynamic content. This article showed you how to generate dynamic tables.

About the Authors:

Jose Annunziato received his Master's and Doctor of Science degrees in computer science from the University of Massachusetts. Lowell. Dr. Annunziato works for BEA Systems where he develops courseware products such as WebLogic Server, WebLogic Commerce Server, and WebLogic Enterprise.

Stephanie Fesler Kaminaris has written hundreds of pages of course materials on Web development, such as HTML, JavaScript, Active Server Pages, VBScript, and CGI programming. She has also written course materials for BEA's WebLogic Server courses, such as WebLogic as a Web Server, Java Server Pages, Servlets, and Web Applications.


This article is based on techniques presented in Sams Teach Yourself JavaServer Pages in 24 Hours (0672320231) - a book by Jose Annunziato and Stephanie Fesler Kaminaris, with Sams Publishing.

© Copyright Sams Publishing, All Rights Reserved


 






Comment and Contribute

 


(Maximum characters: 1200). You have characters left.

 

 


Sitemap | Contact Us

Rocket Fuel