Alternating Table row colors

**jonsey** · 02-13-2007, 02:56 PM

Looking for a way to Alernating Table row colors. Currently using the following:

Code:

<script type="text/javascript">
window.onload=function()
{	var b, r, t = document.getElementsByTagName("TABLE");
	for(var i=0; i<t.length; i++)
	{	var current_t = t[i];
		if(current_t.className && current_t.className == "zebra")
		{	b = current_t.getElementsByTagName("TBODY");
			for(var j=0; j<b.length; j++)
			{	var current_b = b[j];
				r = current_b.getElementsByTagName("TR");
				for(var k=0; k<r.length; k+=2)
				{	r[k].className = "udda";
				}
			}
		}
	}
}
</script>

<style type="text/css">
table.zebra thead tr	{ background-color: #ccc; }
table.zebra tr			{ background-color: #fff; }
table.zebra tr.udda		{ background-color: #efefef; }
</style>

But in my ASP (classic) I have several <TR> that I don't what to have the color. Is there a way just to build a class in CSS that I could add to my <TR> tag maybe something like:

Code:

table.data tbody tr { 
  background-color:expression( ((sourceIndex- 
          parentNode.firstChild.sourceIndex)%2==1)? 
          (parentNode.parentNode.rowHighlightColor||"#dddddd"):""); 


}

BTW here is my ASP (classic) just in case.

HTML Code:

<%
Option Explicit
Response.Buffer = True

Dim oXml, oGroup, oQuestion, lGroup, lQuestion

Set oXml = Server.CreateObject("Microsoft.XMLDOM")
oXml.async = False
oXml.load (Server.MapPath("paafv2.xml"))
%>

<html xmlns="http://www.w3.org/1999/xhtml">
<head><title></title>
<link rel="STYLESHEET" href="paaf.css" />

</head>
<body>
    <form action="Questionnaire.asp?action=submit" method="post">
	<table">
	
	
	<%
	If Request.QueryString("action") = "submit" Then
		For lGroup = 0 to oXml.SelectNodes("//root/group").Length - 1
			Set oGroup = oXml.SelectNodes("//root/group").Item(lGroup)

			Response.Write("<tr><td><b>" & oGroup.SelectSingleNode("@name").Text & "</b></td></tr>")
		
			For lQuestion = 0 to oGroup.SelectNodes("question").Length - 1
				Set oQuestion = oGroup.SelectNodes("question").Item(lQuestion)

				Response.Write("<tr><td>" & oQuestion.SelectSingleNode("text").Text & " Answer: " & Request.Form("question_" & lGroup & "_" & lQuestion) & "</tr></td>")
			Next

			Response.Write("<tr><td><br><br></td></tr>")
		Next		
	Else
		For lGroup = 0 to oXml.SelectNodes("//root/group").Length - 1
			Set oGroup = oXml.SelectNodes("//root/group").Item(lGroup)

			Response.Write("<tr><td class=""groupheader""><b>" & oGroup.SelectSingleNode("@name").Text & "</b></td></tr>")
		
			For lQuestion = 0 to oGroup.SelectNodes("question").Length - 1
				Set oQuestion = oGroup.SelectNodes("question").Item(lQuestion)

				Response.Write("<tr class=""Looking to Insert Alternating Table row colors Here""><td>" & lQuestion + 1 & "&nbsp;" & oQuestion.SelectSingleNode("text").Text)

				If oQuestion.SelectSingleNode("@response").Text = "2" Then
					Response.Write("&nbsp;<input type=""radio"" name=""question_" & lGroup & "_" & lQuestion & """ value=""100"">Yes")
					Response.Write("&nbsp;<input type=""radio"" name=""question_" & lGroup & "_" & lQuestion & """ value=""0"">No")
				ElseIf oQuestion.SelectSingleNode("@response").Text = "3" Then
					Response.Write("&nbsp;<input type=""radio"" name=""question_" & lGroup & "_" & lQuestion & """ value=""100"">Yes")
					Response.Write("&nbsp;<input type=""radio"" name=""question_" & lGroup & "_" & lQuestion & """ value=""0"">No")
					Response.Write("&nbsp;<input type=""radio"" name=""question_" & lGroup & "_" & lQuestion & """ value=""50"">Maybe")
				ElseIf oQuestion.SelectSingleNode("@response").Text = "5" Then
					Response.Write("&nbsp;<input type=""radio"" name=""question_" & lGroup & "_" & lQuestion & """ value=""0"">1")
					Response.Write("&nbsp;<input type=""radio"" name=""question_" & lGroup & "_" & lQuestion & """ value=""25"">2")
					Response.Write("&nbsp;<input type=""radio"" name=""question_" & lGroup & "_" & lQuestion & """ value=""50"">3")
					Response.Write("&nbsp;<input type=""radio"" name=""question_" & lGroup & "_" & lQuestion & """ value=""75"">4")
					Response.Write("&nbsp;<input type=""radio"" name=""question_" & lGroup & "_" & lQuestion & """ value=""100"">5")
				End If
				Response.Write("<br><font size=""1"">" & oQuestion.SelectSingleNode("desc").Text & "</font></td></tr>")
			  'Response.Write("<td><textarea id=""TextArea1"" rows=""2"" cols="20"></textarea></td></tr>")'was tryen to insert the textarea for the comments but no luck here.
				
			Next
            Response.Write("<tr class=""groupfooter""><td>" & oGroup.SelectSingleNode("@name").Text & "&nbsp;Score:" & "</td></tr>")
			
		Next
		
		Response.Write("<tr><td><input type=""submit"" value=""Submit Selections"" class=""button""></tr></td>")
	End If
	%>

	</table>	
	</form>

</body>
</html>

<% 
Set oXml = Nothing
Set oGroup = Nothing
Set oQuestion = Nothing
%>

**eXceed69** · 02-15-2007, 03:34 AM

the only problem i see in the css is that you have declared overlapping tr attributes.

Code:

table.zebra thead tr
table.zebra tr

depending the encoding, the last one will be used on all rows if no class specified, and the first if class thead is specified. What you would have to do is define something along the lines of:

Code:

table.tr.thead
table.tr

then insert the class names into the tr tags, all those not classed will get the 2nd attribute, and those with

Code:

<tr class="thead"></tr>

will get the first.

Thread: Alternating Table row colors

Thread Tools

Search Thread

Alternating Table row colors

Bookmarks

Bookmarks

Posting Permissions