Programming Help

Web Development



What's Here?

  • Members: 149,827
  • Replies: 507,027
  • Topics: 79,917
  • Snippets: 2,667
  • Tutorials: 706
  • Total Online: 2,534
  • Members: 115
  • Guests: 2,419

Welcome to Dream.In.Code
Become an Expert!

Join 149,827 Programmers for FREE! Get instant access to thousands of experts, tutorials, code snippets, and more! There are 2,534 people online right now. Registration is fast and FREE... Join Now!




Changeable Table row color

 
 Reply to this topicStart new topic

Changeable Table row color
eXceed69
14 Feb, 2007 - 07:04 PM
Post #1

"Super Sentai Knight Of DawN"
Group Icon

Joined: 12 Nov, 2006
Posts: 682



Thanked: 1 times
Dream Kudos: 675
My Contributions
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.

here's the html code;

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


Thanks for the reply biggrin.gif

This post has been edited by eXceed69: 14 Feb, 2007 - 07:06 PM
User is offlineProfile CardPM
+Quote Post

William_Wilson
RE: Changeable Table Row Color
14 Feb, 2007 - 07:36 PM
Post #2

lost in compilation
Group Icon

Joined: 23 Dec, 2005
Posts: 4,101



Thanked: 25 times
Dream Kudos: 3275
Expert In: Java, C, Javascript

My Contributions
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 <tr class="thead"></tr> will get the first.
User is offlineProfile CardPM
+Quote Post

Arbitrator
RE: Changeable Table Row Color
16 Feb, 2007 - 05:44 PM
Post #3

D.I.C Regular
Group Icon

Joined: 26 Jan, 2005
Posts: 492



Thanked: 2 times
My Contributions
Apply classes to the special rows and change the way you append the class name via JavaScript so that the current class names are not overwritten: element.className += " udda". Then specify that the special rows’ class is important to ensure that it isn’t overwritten by the udda class: table.zebra tr.special { background-color: color !important; }.

The zebra effect currently isn’t possible with pure (standardized) CSS; the CSS3 Selectors module intends to change that, but it’s still in W3C Working Draft status.

QUOTE(William_Wilson @ 14 Feb, 2007 - 09:36 PM) *

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

table.zebra thead tr
table.zebra tr
class="zebra" and src="image.png" are attributes. What you quoted are CSS selectors.
User is offlineProfile CardPM
+Quote Post

Fast ReplyReply to this topicStart new topic
Time is now: 1/8/09 09:29AM
Invision Power Board v2.1.7 © 2009  IPS, Inc.
Licensed to: MediaGroup1

Be Social

Dream.In.Code RSS Feed Dream.In.Code LinkedIn Group Follow Us On Twitter

Live Help!

Tutorials

Programming

Web Development

Reference Sheets

Code Snippets

DIC Chatroom

Bye Bye Ads

Monthly Drawing

Thumb Drive

Top Contributors

Top 10 Kudos This Month