Alternating Colors on <TR> throughout a CFLOOP 1

[rojas1mg]

Is there a way to alternate colors (say, bgcolor = white and bgcolor = lightgrey) inside a CFLOOP when outputting to a table? Thanks.


rojas1mg - - - I love Tek-Tips and all members who reply.

 

[rojas1mg]

Disregard. I found it in my CFMX Web Application Contruction Kit (Fifth Edition) book.

<CFIF CurrentRow MOD 2 is 1>
  <CFSET bgcolor = "white">
<CFELSE>
  <CFSET bgcolor = "lightgrey">
</CFIF>

rojas1mg - - - I love Tek-Tips and all members who reply.

 

[rojas1mg]

Forgot one important line of code:

[COLOR=brown]
<CFIF CurrentRow MOD 2 is 1>
  <CFSET bgcolor = [COLOR=blue]"white"[/color]>
<CFELSE>
  <CFSET bgcolor = [COLOR=blue]"lightgrey"[/color]>
</CFIF>[/color]
[COLOR=teal]<TR bgcolor=[COLOR=blue]"#bgcolor#"[/color]>[/color]

rojas1mg - - - I love Tek-Tips and all members who reply.

 

[xtendscott]

If it is a site where this could be duplicated over multiple pages that require different scripts, CSS could assist in easier updating for all at one time.

<CFIF CurrentRow MOD 2 is 1>
  <TR class="primaryrow">
<CFELSE>
  <TR class="secondaryrow">
</CFIF>

in style.css file:

primaryrow {
background:white;
}

secondaryrow {
background:lightgrey;
}

Style sheets make many things easier for updating site wide changes instantly.

xtendscott
Web Site Design and CF Programming

 

[r937]

star for you, xtendscott

not enough CF programmers conscious of benefits of css

keep up the good work

rudy | r937.com | Ask the Expert | Premium SQL Articles
SQL for Database-Driven Web Sites (next course starts March 6 2005)

 

[rojas1mg]

I do use CSS and was only using it for trial. Will update code to reflect the style sheet as it is FAR more powerful.

rojas1mg - - - I love Tek-Tips and all members who reply.

 

[TruthInSatire]

styles are cool.

however i find it's best if you assign the class to each cell. not the table row.

my example:

<td style = "<cfif currentrow mod 2 eq 0>evenRow<cfelse>oddRow</cfif>">

doing it by cell not row allows you to also check other things like negative values in the cell and assign a totally different class without having to worry about inhearatance(sp).



If you don't ask the right questions, you don't get the right answers. A question asked in the right way often points to its own answer. Asking questions is the ABC of diagnosis. Only the inquiring mind solves problems.

-Quote by Edward Hodnett

 

[rojas1mg]

I've added the suggested items to my style sheet as follows:

.[COLOR=purple]primaryrow[/color] [b]{[/b][COLOR=blue]background[/color]:[COLOR=red]lemochiffon[/color][b]}[/b]
.[COLOR=purple]secondaryrow[/color] [b]{[/b][COLOR=blue]background[/color]:[COLOR=red]white[/color][b]}[/b]

And my page as follows and it doesn't change anything. What am I doing wrong?

[COLOR=brown]<cfif billet.recordcount gt[/color] [COLOR=blue]0[/color]>
[COLOR=brown]<cfset allguests=[/color][COLOR=blue]""[/color]>
[COLOR=brown]<cfloop query=[/color][COLOR=blue]"billet"[/color][COLOR=brown]>
<cfset thisguest = guest_ID>[/color]
[COLOR=gray]<!---This determines the colors of the rows--->[/color]
[COLOR=brown]<CFIF CurrentRow MOD[/color] [COLOR=blue]2[/color] [COLOR=brown]is[/color] [COLOR=blue]1[/color]>
  [COLOR=teal]<TR class=[/color][COLOR=blue]"primaryrow"[/color][COLOR=brown]>[/color]
[COLOR=brown]<CFELSE>[/color]
  [COLOR=teal]<TR class=[/color][COLOR=blue]"secondaryrow"[/color][COLOR=brown]>
</CFIF>[/color]
[COLOR=gray]<!---<tr bgcolor="#bgcolor#">--->[/color]
	[COLOR=teal]<td align=[/color][COLOR=blue]"center"[/color][COLOR=teal]>[/color]#Guest_ID#[COLOR=teal]</td>[/color]
	[COLOR=teal]<td>[/color]#Rank#[COLOR=teal]</td>[/color]
	[COLOR=teal]<td>[/color]#Guest_First#[COLOR=teal]</td>[/color]
	[COLOR=teal]<td>[/color]#Guest_Last#[COLOR=teal]</td>[/color]
	[COLOR=teal]<td>[/color]#Email#[COLOR=teal]</td>[/color]

rojas1mg - - - I love Tek-Tips and all members who reply.

 

[rojas1mg]

Want to know what my problem was? I mistyped "lemonchiffon". That's all it was. Sorry to trouble everyone. If you were in my office, you would've heard a loud "DOH!". Thank you.

rojas1mg - - - I love Tek-Tips and all members who reply.

 

[imstillatwork]

instead of
.primaryrow {background:lemochiffon}

do
.primaryrow {background-color:#fffacd;}

OR

.primaryrow {background-color:lemonchiffon;}

spelling counts here.

 

[imstillatwork]

you beat me to it.

 

[xtendscott]

Imstillatwork is probably more correct when using just a color for the background.

.primaryrow {background-color:lemonchiffon;}

If you want to have an image as the background or to cover a portion of the cell and a color as a backup if users have images turned off you can use the the following.

If you check for a negative value you could do something like this.

.negativeNumber {
color:red;
background: #FFFACD url(/images/smallRed-X.gif) no-repeat top left;
padding-left:10px; /* gives room for the X */
}


and r937, thanks.

xtendscott
Web Site Design and CF Programming