How to display nested XML elements in a HTML table using Data Islands?

An XML document can be thought of as a database. When binding XML data to a table, al records are displayed in one rows. To bind levels of nested recordsets, use nested tables for all nested XML data.

<xml id="books">
<?xml version="1.0"?>
<books>
   <book>
	<title>OpenGL Programming Guide Fourth Edition</title>
	<ISBN>0321173481</ISBN>
	<author>Michael R. Sweet</author>			
	<location>
		<department>Development</department>
		<room>107</room>
	</location>
	<publisher>Addison-Wesley</publisher>
	<year>2004</year>
   </book>
   <book>
	<title>Curves and Surfaces for CAGD: A Practical Guide</title>
	<ISBN>0849371643</ISBN>
	<author>Gerald Farin </author>
	<location>
		<department>Development</department>
		<room>116</room>
	</location>
	<publisher>Academic Press</publisher>
	<year>2002</year>
   </book>
   <book>
	<title>An Introduction to NURBS: With Historical Perspective</title>
	<ISBN>1558606696</ISBN>
	<author>David Rogers</author>
	<location>
		<department>Development</department>
		<room>120</room>
	</location>
	<publisher>Academic Press</publisher>
	<year>2001</year>
   </book>
   <book>
	<title>NURBS: From Projective Geometry to Practical Use</title>
	<ISBN>1568810849</ISBN>
	<author>Gerald Farin</author>
	<location>
		<department>Development</department>
		<room>126</room>
	</location>
	<publisher>A K Peters</publisher>
	<year>1999</year>
   </book>
</books>
</xml>

Bind the outer table to the top level recordset.

<table align="center" width="100%" cellpadding="0" cellspacing="2" border="1" datasrc="#books">
 <thead>
   <tr>
	<th>Location
	 <table width="100%">
         <tr>
		<th>Department</th>
		<th>Room</th>
	 </tr>
	 </table>
        </th>
	<th>Title</th>
	<th>Publisher</th>
	<th>Year</th>
   </tr>
 </thead>
 <tbody>
  <tr>
   <td align="center">

Bind the inner table to the nested nodes.

	<table width="100%" datasrc="#books" datafld="location" border="0"> 
	<tr> 
	        <td width="50%" align="left">
                 <span datafld="department"></span>
                </td>
		<td width="50%" align="left">
                 <span datafld="room"></span>
                </td> 	
	</tr> 
	</table> 
   </td> 
   <td><span datafld="title"></span></td> 
   <td><span datafld="publisher"></span></td> 
   <td><span datafld="year"></span></td> 
   </td> 
  </tr>
 </tbody> 
</table>

Note that some table formatting is required to have the record hierarchy nicely presented.

Related threads:
Displaying multilevel XML data in HTML
Record Field into HTML table

Back to XML FAQ

 

Advertisement

Free Magazine