HostMySite.Com is sponsoring this tutorial, please visit their site today!

Dynamically Generating HTML Table Columns & Rows by: James Harvey

[Download in PDF Format] [Download in FlashPaper Format]

I've written this tutorial, because I had a need to do exactly what the title suggests. I needed to dynamically generate a table with Columns and Rows, based off of a CFQUERY results. Well, this is the fruit of my labors, and I hope it assists others as well.

Introduction:
In this example you are treating your recordset as though it was a structure. The first loop will give you your rows and the nested loop will give you your cells.
To change the number of columns in the table you will modify the variable NumberOfColumns.

The Script:
<cfquery name="parks" datasource="cfdocexamples">
select top 7 parkName, parkType, city, state from parks order by parkName
</cfquery>
<cfset NumberOfColumns = 5>
<cfset idx2Counter = 1>
<cfset addTo = parks.RecordCount MOD NumberOfColumns>
<!---\\ If you have a remainder you need to add 1 more row. //--->

<cfif addTo GT 0>
<cfset addTo = 1>
</cfif>

<table border="1">
<cfloop from="1" to="#(parks.RecordCount/NumberOfColumns) + addTo#" index="idx">
<tr>
<cfloop from="1" to="#NumberOfColumns#" index="idx2">
<td valign="top">
<cfoutput>
<!---\\This is the content of the Cell Pulled from the database query above//--->
<cfif Len(parks.parkName[idx2Counter])>
#parks.parkName[idx2Counter]#<br>
#parks.parkType[idx2Counter]#<br>
#parks.city[idx2Counter]#, #parks.state[idx2Counter]#
<cfelse>
&nbsp;
</cfif>
<!---\\Now We end out content output//--->
</cfoutput>
</td>
<cfset idx2Counter = idx2Counter + 1>
</cfloop>
</tr>
</cfloop>
</table>

This will now generate a table with 5 columns and X number of rows.
Enjoy!

-James

HostMySite.Com is sponsoring this tutorial, please visit their site today!

Please rate this tutorial:

Post a new comment on this tutorial
post a new comment on this particular tutorial
Your Name:
Your Email:
Comment Title:
Comments:
Key Phrase: