Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations wOOdy-Soft on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

table - populating cells in 3 cols, then again on a new row 2

Status
Not open for further replies.

DrDan1

Technical User
Oct 2, 2002
127
GB
I've been racking my brain as to how to do this. And I'm sure it's a simple thing but I'm not so clued up on CFM.

I want a table with 12 cells. 3 cols and 4 rows. I'm wanting items put next to each other till the 3rd column, and then starting a new row for the next three.

e.g. product 1 in cell one, prod2 in cell2, prod3 in cells three then prod4 in cell 4 on the next row.

thanks.

----------------------------------------
Knowing is not enough, we must apply. Willing is not enough, we must do.
--So said the ever wise Bruce Lee
Memorize and live by it!
 
I wrote an faq similar to what you're talking about, only it displays the data down the columns not accross. take a look at this and see if you can make it do what you need. It will at least give you the basis on how it works. Or, maybe this one will work for you...

faq232-5578

Beware of programmers who carry screwdrivers.
 
ok..

You have a recordcount and currentrow from the database

Then you have a set variable of the number of cells you want.

If the currentrow is evenly divisible by the cellcount (3 this time), then its time to make a new row.

if currentrow is = to recordcount, then you need to figure out if you need to fill in any empty cells for proper html formating.

Code:
<table>
<cfoutput query="q_your_query">
	<cfif currentrow mod cols EQ 1>
		<!--- NEW ROW AND CELL--->
		<tr><td>
	<cfelse>
		<!--- NEW CELL --->
		<td>
	</cfif>
	DATA FOR THE CELL
	</td>
	<cfif currentrow mod cols EQ 0>
		<!--- CLOSE ROW IF CURRENT ROW DIVISABLE EVENLY BY COLUMNS NEEDED--->
		</tr>
	<cfelseif recordcount LT cols>
		<!--- CLOSE ROW IF TOTAL RECORDCOUNT IS LESS THAN COLUMNS NEEDED--->
		</tr>		
	<cfelseif currentrow EQ recordcount>
		<!--- FILL IN EXTRA BLANK CELLS FOR PROPER HTML COMPATABILITY ---->
		<!--- FIGURE OUT LOOP COUNT BASED ON RECORDCOUNT AND COLUMNS NEEDED --->
		<cfloop from="1" to="#cols - (recordcount mod cols)#" index="i">
			<td>&nbsp;</td>
		</cfloop>
		<!--- CLOSE ROW --->
		</tr>
	</cfif>
</cfoutput>
<!--- DONE! --->
</table>



 
forgot to put <cfset cols=3> (can be anyt integer and will still work great)

there are a few spots you might be able to improve this....I just never looked at it much after a wrote it several years ago.

I have seen other methods, but most of them don't consider proper html and leave off td or tr end tags :(

mine will validate, and you can change the number of columns anytime, and it still works.

 
So, as far as the 12 cells goes, you need to make that happen in your query for your products, along with making the page number index to view the next set of 12 products.



 
Thanks. I've got the page numbers going. I'm having a look through this now... but it's just about bed time here. Might pack it in till tomorrow. Thanks a bunch for your help. I'm not really a programer. I'll let you know how it turns out :)

----------------------------------------
Knowing is not enough, we must apply. Willing is not enough, we must do.
--So said the ever wise Bruce Lee
Memorize and live by it!
 
P.S. What is mod?

----------------------------------------
Knowing is not enough, we must apply. Willing is not enough, we must do.
--So said the ever wise Bruce Lee
Memorize and live by it!
 
modulus is the remainder of a division. If there is no remainder, the number is evenly divisable.

well, back to holdempoker.com....

 
if you use the FAQ i pointed you to before and change these two lines i think it will work.

Code:
FROM
<cfset output = output + totalRows>
TO
<cfset output = output + 1>
and remove this line
Code:
<cfset output = thisRow + 1>


Beware of programmers who carry screwdrivers.
 
both the vertical faq and mine that I posted have some issues when the recordcount is less than the cols=

I'll get to it sooner or later...

 
Ow. My poor head. Thanks guys. I just need to find some time (in short supply lately) to work through it.

----------------------------------------
Knowing is not enough, we must apply. Willing is not enough, we must do.
--So said the ever wise Bruce Lee
Memorize and live by it!
 
How do you figure? you should run it before relying on a mental data trace to say someone elses code is broke.

yours might have problems, but mine doesn't. copy and paste this, it runs like a charm.

i used a list vice a query so it'll run with no changes. listlen(mylist) = 3(same thing as query.recordcount) cols = 5 works great. a,b,c in individual columns with two empty cells as expected. add more letters to the list... still works great, so no need for you to get to anything sooner or later.

Code:
<html>
<head>
<title>Vertical Sorting</title>
</head>
<cfset mylist = "a,b,c">
<body>
<!--- set the number of colums you wish to have --->
<cfset cols = 5>
<!--- get the number of rows so you know what record to display at the top of the next row. for example if our query contains "a,b,c,d,e,f,g,h,i,j,k,l,m" (13 elements) it will produce 3 totalrows--->
<cfset totalRows = ceiling(listLen(myList) / cols)>
<!--- set inital record to 1 "output" is the actual cell of the query --->
<cfset output = 1>
<!--- Create table --->
<table width = "100%" border="0" align="center" cellpadding="2" cellspacing = "2">              
<!--- loop through the rows.  This loop will run 3 times in this example --->
<cfloop from = "1" to = "#totalRows#" index = "thisRow">
<tr>
<!--- this loop will run 5 times in times in this example --->
<cfloop from = "1" to = "#cols#" index = "thisCol">
<!--- the width in the table cell will dynamicaly calculated to evenly distribute the cells. in this example if cols = 5 100/5 will make the cells 20% of the table --->
<td width = "<cfoutput>#numberformat(evaluate(100/cols), 99)#</cfoutput>%" align="center" nowrap style = "border: 1px solid #ccc;">
<!--- Check current record with the record count, this will be used to display data or an empty cell --->
<cfif output lte listLen(myList)>
<cfoutput>#listGetAt(myList, output)#</cfoutput>
<cfelse>
<!--- use <br> to display an empty cell --->
<br>
</cfif>
<!--- increment counter to the next record in this example if we started on the first cell of the first row it would be 1(a), then 4(d), then 7(g) and so on if this was the firs cell on the second row it would be 2(b), 5(e), 8(h), continue... --->
<cfset output = output + 1>
</td>
</cfloop>
<!--- this little bit tells where to start the next row. if we just finished the first row output would be 2(b) --->

</tr>
</cfloop>
</table>
</body>
</html>

Beware of programmers who carry screwdrivers.
 
ok. remove this from my posted code.

Code:
<cfelseif recordcount LT cols>
        <!--- CLOSE ROW IF TOTAL RECORDCOUNT IS LESS THAN COLUMNS NEEDED--->
        </tr>

no need for it.

 
whoa. sorry. chill.

At first use (yes I used it) it appeared to be doing something wrong, I had duplicate data being displayed. That was before I saw and applied your fix.

Mine is fixed also. No problems either way. The original question was for a horizontal arrangment, so I gave my suggestion also.

you should run it before relying on a mental data trace to say someone elses code is broke.[/qoute]
What makes you think I didn't? You even admited a fix was needed. After I applied that fix, it does work.

We're both offering different suggestions to help the original poster. No need to get defensive about it.
 
no need to chill i'm cool. :) (lame play on words i know.)

you posted the problem after i posted a "fix"

and fix isn't a good word anyway i posted the faq to
It will at least give you the basis on how it works

a "change" was made to switch the display order. no "fix" was needed to correct a recordcount < cols problem.

Beware of programmers who carry screwdrivers.
 
Fair enough. I'll still build off of your code in the future if I need to do it this way.



 
Thanks guys. I got it sorted. Works like a charm. See if you wanna see. You learn something new everyday. :)


----------------------------------------
Knowing is not enough, we must apply. Willing is not enough, we must do.
--So said the ever wise Bruce Lee
Memorize and live by it!
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top