We help IT Professionals succeed at work.

Alternate table row color for expanding rows

Janrow
Janrow asked
on
Medium Priority
694 Views
Last Modified: 2012-08-13
My currentrow mod 2 code expands the table when needed but I also want to alternate color on the table rows (<TR>). But my code does not work. The expanding rows work just fine but not the alternating color for earch row.
<table>
  <cfoutput Query="Markets">
    <cfif (currentrow mod 2) is 1>
     <tr bgcolor="#IIf(CurrentRow mod 2 is 0, de('EAEAEA'), de('CCCCCC'))#">      
    </cfif>	
	<td>#newdates#</td>	
    <cfif (currentrow mod 2) is 0>
    </tr>
    </cfif>
  </cfoutput>
</table>

Open in new window

Comment
Watch Question

Top Expert 2008

Commented:
hi,
try to change
<cfif (currentrow mod 2) is 1>
     <tr bgcolor="#IIf(CurrentRow mod 2 is 0, de('EAEAEA'), de('CCCCCC'))#">      
    </cfif>

to this
     <tr bgcolor="#IIf(CurrentRow mod 2 is 0, de('EAEAEA'), de('CCCCCC'))#">      

Author

Commented:
That won't work because I loose my expanding columns. I need to keep both the expanding columrns and the alternating color rows.
CERTIFIED EXPERT
Expert of the Year 2008
Top Expert 2008

Commented:
>>But my code does not work
This is because when line 3 is true:
 <cfif (currentrow mod 2) is 1>

it enters line 4, at which point this:
IIf(CurrentRow mod 2 is 0,...
will always evaluate to false, because line 3 allowed you to get to this point only if "currentrow mod 2 is 1". You cannot do the alterating row color based on currentrow. The criteria you use to create the opening and closing <tr> tags don't seem right. Is that code fragment producing correct/valid html markup?

Author

Commented:
> Is that code fragment producing correct/valid html markup?
Yes, works fine. It expands the table colums as I want.

I understand it's difficult to get both expanding colums and alternatng row colors. Perhaps it's impossible in the way I'm doing this. But I'm not ready to rewrite it all or take much time at this. It's just a slight cosmetic problem with the table rows all being the same color, a bit difficult to tell one from the other.

So, is there any other possible way to do this? If not, I'll accept your opinion, award you points with my usual heatfelt thanks.
CERTIFIED EXPERT
Expert of the Year 2008
Top Expert 2008

Commented:
Try it via JS:
<script type="text/javascript"><!--
window.onload=colorizeTable;
 
function colorizeTable()
{
	var color = ["#EAEAEA","#CCCCCC"];
	var tbl = document.getElementById("marketsTable");
	if(tbl)
	{
		var tr = tbl.getElementsByTagName("tr");
		if(tr)
		{
			for(var i=0, limit=tr.length; i < limit ++i)
			{
				tr[i].style.backgroundColor = color[i%2];
			}
		}
	}
}
//--></script>
<table id="marketsTable">
  <cfoutput Query="Markets">
    <cfif (currentrow mod 2) is 1>
     <tr>      
    </cfif>	
	<td>#newdates#</td>	
    <cfif (currentrow mod 2) is 0>
    </tr>
    </cfif>
  </cfoutput>
</table>

Open in new window

Scott BennettManager Technology

Commented:
do it like this:
<table>
<cfset bgcolor = "EAEAEA">
  <cfoutput Query="Markets">
    <cfif (currentrow mod 2) is 1>
		<cfif bgcolor eq "EAEAEA"><cfset bgcolor = "CCCCCC"><cfelse><cfset bgcolor = "EAEAEA"></cfif>
     <tr bgcolor="#bgcolor#">      
    </cfif>     
        <td>#newdates#</td>     
    <cfif (currentrow mod 2) is 0>
    </tr>
    </cfif>
  </cfoutput>
</table>

Open in new window

Author

Commented:
Neither of those suggestions works for me. No change. I was very careful testing both of your suggestions, and I thank you for trying. They both looked very interesting and gave me ideas for code in other areas.

The main reason Im using the <cfif (currentrow mod 2) is 1> <tr> </cfif> is to display the query result in two table columns instead of one. If either of you have a different way to display the query output into two or more table columns instead of one, then perhaps I can use the standard mod 2 code to alternate colors and it will work.
Manager Technology
Commented:
The code I showed you above is doing what you are asking, I have tested it. but it won't work very well if you want more than 1 column per row.  I would suggest doing it like this if you want more than 2 columns per row (you can change the columnsperrow variable in the second line to add more columns:
<table>
<cfset ColumnsPerRow = 3>
<cfset bgcolor = "EAEAEA">
<tr bgcolor="<cfoutput>#bgcolor#</cfoutput>">
  <cfoutput Query="Markets">
        <td>#newdates#</td>     
		<cfif (currentrow mod ColumnsPerRow) is 0>
		<cfif bgcolor eq "EAEAEA"><cfset bgcolor = "CCCCCC"><cfelse><cfset bgcolor = "EAEAEA"></cfif>
		</tr><tr bgcolor="#bgcolor#">      
		</cfif>   
  </cfoutput>
  </tr>
</table>

Open in new window

Scott BennettManager Technology

Commented:
And just incase you meant that you want the bgcolor to change with every cell rather than every row that would be done like this:
<table>
<cfset ColumnsPerRow = 3>
<cfset bgcolor = "EAEAEA">
<tr>
  <cfoutput Query="Markets">
        <cfif bgcolor eq "EAEAEA"><cfset bgcolor = "CCCCCC"><cfelse><cfset bgcolor = "EAEAEA"></cfif>
		<td bgcolor="#bgcolor#">#newdates#</td>     
		<cfif (currentrow mod ColumnsPerRow) is 0>
		</tr><tr>      
		</cfif>   
  </cfoutput>
  </tr>
</table>

Open in new window

Author

Commented:
Yes, the per row did it this time. Excellent, just what I wanted. I now have alternate colors and control over columns per row!

Thanks

Explore More ContentExplore courses, solutions, and other research materials related to this topic.