PDA

View Full Version : Alternating Table row colors



jonsey
02-13-2007, 02:56 PM
Looking for a way to Alernating Table row colors. Currently using the following:



<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:



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.



<%
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.


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:


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
<tr class="thead"></tr> will get the first.