Link to home
Create AccountLog in
Avatar of ullenulle
ullenulleFlag for United States of America

asked on

Color every second row in a repeating table...

Hi there.

I have a pretty long table with repeating rows on an asp-page. How can I color every second row? That way it will be easy to read. I'm using DreamWeaver CS3 to develop the pages.

Best regards

Ullenulle
Avatar of theremon
theremon
Flag of Greece image

Hi there

what you're looking for is really easy to implement, however I'm not sure how Dreamweaver structures its code. Can you post the bit that is displaying the table so I can provide the necessary changes?
Give even-numbered rows a CSS class of "even", and odd-numbered rows a CSS class of "odd". Set the styles accordingly.
Avatar of Mark Franz
Simple, don't use Dreamweaver.  Here one sample of already suggested methods;  there are al least three ways of doing this that I know;

<style type="text/css">
.blue{	background-color: Blue;
}
 .red { background-color: Red;	
}
</style>

...
			<%
			i = 1
			'Do While Not rs.EOF
			For p = 0 To 5
				If i = 1 Then
					Response.Write "<tr><td class=blue>This is a blue row</td></tr><br>"
					i = 0
				Else
					Response.Write "<tr><td class=red>This is a red row</td></tr><br>"
					i = 1
				End If
				If i = 1 Then
					'i = 0
				Else
					'i = 1
				End if
			Next 
			'Loop
			%>

Open in new window

>>If i = 1 Then ?

Why not dispense with "i" altogether?

If p Mod 2 = 0 Then
    Response.Write "<tr><td class='even'>This is a blue row</td></tr><br>"
Else
    Response.Write "<tr><td class='odd'>This is a blue row</td></tr><br>"


Note: HTML element attributes should be quoted, hence the apostrophese.
I did say that there was at least 3 different ways to do this...
And we both used the same way as an example. Me first ;-)
Smart minds thing alike...  Mod() is a good way to do this but I like to use i in case the user wants a different color row for every third or forth row.  Another way is to use GetRows() and then parse through which is more efficient than looping through the recordset., you will still have to use Mod() or i=i+1 but since the recordset is now stored in an array the loop will be faster since we can close the recordset earlier, thereby taking the load off the database.

This way gets rid of the .CSS call altogether;
      
<TABLE width="80%" cellpadding="4" cellspacing="1" align="center" bgcolor="#000000" border="0">
						<%
							i = 1
			'Do While Not rs.EOF
							For p = 0 To 5
								If i = 1 Then
									Response.Write "<tr><td bgcolor=""#ffcc33"">This is a sand colored row row</td></tr><br>"
									i = 0
								Else
									Response.Write "<tr><td bgcolor=""#ff9933"">This is a pumkin colored row</td></tr><br>"
									i = 1
								End If
							Next 
			'Loop
			%>		
					</TABLE>

Open in new window

Yeah, but then you're injecting CSS into the HTML elements, and that is messy and difficult to maintain.

I agree about "getrows" - once the array is returned the recordset can be destroyed.
Avatar of ullenulle

ASKER

Hi guys,
Thanks for your responses! The last suggestion from mgfranz looks good as an example, but I have some trouble integrating that into my table, so I'll put the codes here. I hope you can tell me what to do to color every second row... or color every second row differently. :-) Here it comes... in the code-window.

Best regards
Ullenulle
<%
Dim Repeat1__numRows
Dim Repeat1__index

Repeat1__numRows = 20
Repeat1__index = 0
Recordset3_numRows = Recordset3_numRows + Repeat1__numRows
%>
<table border="1" cellspacing="0" bordercolor="#CCCCCC">
  <tr class="style31">
    <td bgcolor="#CBFCFE"><strong>Titel</strong></td>
    <td bgcolor="#CBFCFE"><strong>Team</strong></td>
    <td bgcolor="#CBFCFE"><strong>Name</strong></td>
    <td width="50" bgcolor="#CBFCFE"><strong>Planlagt antal pt.</strong></td>
    <td width="50" bgcolor="#CBFCFE"><strong></strong>&nbsp;</td>
    <td width="50" bgcolor="#CBFCFE"><strong>jan</strong></td>
    <td width="50" bgcolor="#CBFCFE"><strong>feb</strong></td>
    <td width="50" bgcolor="#CBFCFE"><strong>mar</strong></td>
    <td width="50" bgcolor="#CBFCFE"><strong>apr</strong></td>
    <td width="50" bgcolor="#CBFCFE"><strong>maj</strong></td>
    <td width="50" bgcolor="#CBFCFE"><strong>jun</strong></td>
    <td width="50" bgcolor="#CBFCFE"><strong>jul</strong></td>
    <td width="50" bgcolor="#CBFCFE"><strong>aug</strong></td>
    <td width="50" bgcolor="#CBFCFE"><strong>sep</strong></td>
    <td width="50" bgcolor="#CBFCFE"><strong>okt</strong></td>
    <td width="50" bgcolor="#CBFCFE"><strong>nov</strong></td>
    <td width="50" bgcolor="#CBFCFE"><strong>dec</strong></td>
    <td width="50" bgcolor="#CBFCFE"><strong>Sum år til dato</strong></td>
  </tr>
  <% While ((Repeat1__numRows <> 0) AND (NOT Recordset3.EOF)) %>
    <tr class="style31">
      <td><%=(Recordset3.Fields.Item("combi").Value)%></td>
      <td><%=(Recordset3.Fields.Item("team").Value)%></td>
      <td><%=(Recordset3.Fields.Item("name").Value)%></td>
      <td width="50"><%=(Recordset3.Fields.Item("planlagt_antal").Value)%></td>
      <td width="50">&nbsp;</td>
      <td width="50"><%=(Recordset3.Fields.Item("januar").Value)%></td>
      <td width="50"><%=(Recordset3.Fields.Item("februar").Value)%></td>
      <td width="50"><%=(Recordset3.Fields.Item("marts").Value)%></td>
      <td width="50"><%=(Recordset3.Fields.Item("april").Value)%></td>
      <td width="50"><%=(Recordset3.Fields.Item("maj").Value)%></td>
      <td width="50"><%=(Recordset3.Fields.Item("juni").Value)%></td>
      <td width="50"><%=(Recordset3.Fields.Item("juli").Value)%></td>
      <td width="50"><%=(Recordset3.Fields.Item("august").Value)%></td>
      <td width="50"><%=(Recordset3.Fields.Item("september").Value)%></td>
      <td width="50"><%=(Recordset3.Fields.Item("oktober").Value)%></td>
      <td width="50"><%=(Recordset3.Fields.Item("november").Value)%></td>
      <td width="50"><%=(Recordset3.Fields.Item("december").Value)%></td>
      <td width="50"><%=(Recordset3.Fields.Item("aartildato").Value)%></td>
    </tr>
    <% 
  Repeat1__index=Repeat1__index+1
  Repeat1__numRows=Repeat1__numRows-1
  Recordset3.MoveNext()
Wend
%>
</table>

Open in new window

Ugh! Injected CSS - bad form.
Possible... but as I said. I'm using Dreamweaver. :o) Anyway... that doesn't stop me from fooling around with the codes myself. I just need the repeating rows, because the fields are coming from a MySQL database, at the number of rows will keep growing. So how can I color every second row in a table with repeating rows?
This should work;


  <% While ((Repeat1__numRows <> 0) AND (NOT Recordset3.EOF))
        If i = 1 Then
      %>
    <tr class="style31"> (This style is for the even rows)
      <% i = 0
      Else %>
      <tr class="style"32">  (this style is for the odd rows)
<%      i = 1
      End If
%>
 
I'm afraid the table looks the same. I inserted the code in the beginning of the repeating row, right? The one starting with "<% While ((Repeat1__numRows <> 0) AND (NOT Recordset3.EOF)) .....". Or did I miss something? I did remove the extra " between "style" and "32". ;-)
ASKER CERTIFIED SOLUTION
Avatar of Mark Franz
Mark Franz
Flag of United States of America image

Link to home
membership
Create an account to see this answer
Signing up is free. No credit card required.
Create Account
I made it work now. I just needed to put the repeating row/fields in the script in stead of "(this style is for the odd rows)"... :-) Thanks for the help! It was great to solve that issue!