Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Dec 2009
    Posts
    42
    Thanks
    13
    Thanked 0 Times in 0 Posts

    HTML table alternating row colors

    Hi,

    Seek help about how to have alternating group row colors. Have HTML table dynamically populated from database via coldfusion. 6 columns / 2 rows represent one row from database. Table header shows the database fields using horizontal ruler tag <hr>.
    Want to have alternating row group colors for ease of recognition for users - eg - first two rows light gray - next two rows white - next two rows light gray - next two rows white and so on.
    Code for table is below - any help on how to do this greatly appreciated!

    Code:
    <div style="width:900px; position:relative; ">
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <cfinput type="submit" id="enter" name="decSend" value="Submit" style="font-size:14px; font-weight:bold;" >
    <br /><p>
    <table width="900" border="1" cellspacing="1" cellpadding="2" style="position:relative; left:50px">
    
      <tr>
        <td width="140" align="center" bgcolor="#FEF9E7"><font color="#0000FF" style="font-weight:bold">&nbsp;&nbsp;Name<hr />Begin Date</font></td>
        <td width="100" align="center" bgcolor="#FEF9E7"><font color="#0000FF" style="font-weight:bold">&nbsp;&nbsp;Request Date<hr />End Date<font></td>
        <td width="150" align="center" bgcolor="#FEF9E7"><font color="#0000FF" style="font-weight:bold">Type of Hrs<hr />Request Justification</font></td>
        <td width="100" align="center" bgcolor="#FEF9E7"><font color="#0000FF" style="font-weight:bold">&nbsp;Number Hrs Req<hr />Rel Comp Begin Date</font></td>
        <td width="100" align="center" bgcolor="#FEF9E7"><font color="#0000FF" style="font-weight:bold">&nbsp;Projects<hr />Rel Comp End Date</font></td>
        <td width="220" align="center" bgcolor="#FEF9E7"><font color="#0000FF" style="font-weight:bold">&nbsp;&nbsp;Decision<hr />Leave Slip Submitted</font></td>
       </tr>
    <cfoutput query="Req">  
      <tr style="background-color:'FFFFFF';" onMouseOver="this.style.backgroundColor='FFCC33';" onMouseOut="this.style.backgroundColor='FFFFFF'" >
        <td >&nbsp; #Name#</td>
        <td >&nbsp; #DateFormat(RequestDate, "m/d/yyyy")#</td>
        <td >&nbsp; #TypeofHours#</td>
        <td>&nbsp; #NumberHrsRequested#</td>
        <td>&nbsp; #project#</td>
        <td>&nbsp; #Decision#
        <cfinput name="Decision_#ID#" id="Decision_#ID#" type="radio" value="approved" size="1">Approved 
          <cfinput name="Decision_#ID#" id="Decision_#ID#" type="radio" value="denied" size="1">Denied
            <cfinput name="Decision_#ID#" id="Decision_#ID#" type="radio" value="" size="1" checked="yes">N/A
        </td>     
      </tr>
    <tr style="background-color:'FFFFFF';" onMouseOver="this.style.backgroundColor='FFCC33';" onMouseOut="this.style.backgroundColor='FFFFFF'" >
        <td>&nbsp; #DateFormat(BeginDate, "m/d/yyyy")#</td>
        <td>&nbsp; #DateFormat(EndDate, "m/d/yyyy")#</td>
        <td>&nbsp; #justification#</td>
        <td>&nbsp; #DateFormat(RCBDate, "m/d/yyyy")#</td>
        <td>&nbsp; #DateFormat(RCEDate, "m/d/yyyy")#</td>
        <td>&nbsp; #RCLeaveSlip#</td>    
      </tr>
    </cfoutput>  
    </table>
    
    </div>
    Many thanks,
    John

  • #2
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    3
    Thanks
    0
    Thanked 2 Times in 2 Posts
    John,

    I don't know coldfusion but i can give you basic pseudo code to give you an idea how to do this.


    counter = 0
    for each Row

    if counter Modulus 4 is Less Than 2 Then
    tr.class = 'lightGray'
    else
    tr.class = 'white'
    end if

    counter = counter + 1
    next Row

    where tr.class would output:
    <tr class='lightGray'>....
    or
    <tr class='white'>...

    in your css file
    .lightGray{
    background-color:#C0C0C0;
    }

    .white{
    background-color:#FFFFFF;
    }

  • Users who have thanked scdv2 for this post:

    JohnShell (04-24-2011)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •