Alternating Row Colors

jhoover · September 13, 2011

I've checked it seems a million tutorials that have all been simplat, but i have been unable to get alternating row colors working when pulling info from a mysql database and displaying in a table.

Any suggestions?

<html> 
<head> 
<LINK href="style.css" rel="stylesheet" type="text/css">
<script language="JavaScript">
function checkAll(){
for (var i=0;i<document.forms[0].elements.length;i++)
{
	var e=document.forms[0].elements[i];
	if ((e.name != 'allbox') && (e.type=='checkbox'))
	{
		e.checked=document.forms[0].allbox.checked;
	}
}
}
</script>
</head> 

<body> 
<form id="form1" name="form1" method="post" action="handler.php"> 
<div align="center"><h1>Unprocessed Applications</h1><input type="submit" name="button" id="button" value="Submit" /></div>
  <table id="mytable" cellspacing="0"> 
    <tr> 
      <th scope="col"><strong>Date</strong></th> 
      <th scope="col"><strong>ID</strong></th> 
      <th scope="col"><span class="style1 style3"><strong>First Name</strong></span></th> 
      <th scope="col"><span class="style1 style3"><strong>Last Name</strong></span></th> 
      <th scope="col"><div align="center"><span class="style3"></span></div>Check All -></th> 
      <th scope="col"><div align="center"><input type="checkbox" value="on" name="allbox" onclick="checkAll();"/><br /></div></th>
    </tr> 
     
    <?php do { ?> 
    
      <tr> 
        <td width="28%"><span class="style1"><?php echo date('F j, Y - g:ia', $row_update['timestamp']);  ?></span></td> 
        <td width="7%"><?php echo $row_update['id']; ?></td> 
        <td width="17%"><?php echo $row_update['first_name']; ?></td> 
        <td width="28%"><?php echo $row_update['last_name']; ?></td>
        <td width="15%"><div align="center"><?php echo "<a href=\"https://www.*******/index.php?id=". $row_update['id']."\" target='_blank'>View & Print</a>"; ?></div></td> 
        <td width="5%"><div align="center"> 
          <input type="checkbox" name="checkbox[]" value="<?php echo $row_update['id'] ?>" /> 
          <label for="checkbox"></label> 
        </div></td> 
      </tr> 
      <?php } while ($row_update = mysql_fetch_assoc($update)); ?> 
       
  </table> 
   
  <label for="button"></label> 
  <div align="center"><input type="submit" name="button" id="button" value="Submit" /></div>
</form> 
</body> 
</html>

JKG · September 13, 2011

where are your classes for alternating?

are you using css?

freelance84 · September 13, 2011

if($i & 1)
{//row colour is this}
else{//row colour is this}

Pandemikk · September 13, 2011

Several ways to do this. I think the easiest would be doing based on odds and even numbers.

<tr style="background-color:<?php echo ($row_update['id']%2) ?  'black' : 'white'; ?>;">

Odd = True. Even = False.

http://php.net/manual/en/language.operators.arithmetic.php

Odd (and 1) will always have a remainder of one. Even will always return 0.

I'm also suggesting you check that row_update has at least one row, or else you're going to encounter errors.

http://php.net/manual/en/function.mysql-num-rows.php

jhoover · September 13, 2011

Thanks for the responses. I guess where I'm failing at all this is I'm not sure exactly in my code where I'm supposed to place the

<tr style="background-color:<?php echo ($row_update['id']%2) ?  'black' : 'white'; ?>;">

It doesnt work when I put it on one of the existing tr spot and the others are td's and end up coloring the columns.

JKG · September 13, 2011

<html> 
<head> 
<LINK href="style.css" rel="stylesheet" type="text/css">
<script language="JavaScript">
function checkAll(){
for (var i=0;i<document.forms[0].elements.length;i++)
{
	var e=document.forms[0].elements[i];
	if ((e.name != 'allbox') && (e.type=='checkbox'))
	{
		e.checked=document.forms[0].allbox.checked;
	}
}
}
</script>
</head> 

<body> 
<form id="form1" name="form1" method="post" action="handler.php"> 
<div align="center"><h1>Unprocessed Applications</h1><input type="submit" name="button" id="button" value="Submit" /></div>
  <table id="mytable" cellspacing="0"> 
    <tr> 
      <th scope="col"><strong>Date</strong></th> 
      <th scope="col"><strong>ID</strong></th> 
      <th scope="col"><span class="style1 style3"><strong>First Name</strong></span></th> 
      <th scope="col"><span class="style1 style3"><strong>Last Name</strong></span></th> 
      <th scope="col"><div align="center"><span class="style3"></span></div>Check All -></th> 
      <th scope="col"><div align="center"><input type="checkbox" value="on" name="allbox" onclick="checkAll();"/><br /></div></th>
    </tr> 
     
    <?php do { ?> 
    
      <tr style="background-color:<?php echo ($row_update['id']%2) ?  'black' : 'white'; ?>;">
        <td width="28%"><span class="style1"><?php echo date('F j, Y - g:ia', $row_update['timestamp']);  ?></span></td> 
        <td width="7%"><?php echo $row_update['id']; ?></td> 
        <td width="17%"><?php echo $row_update['first_name']; ?></td> 
        <td width="28%"><?php echo $row_update['last_name']; ?></td>
        <td width="15%"><div align="center"><?php echo "<a href=\"https://www.*******/index.php?id=". $row_update['id']."\" target='_blank'>View & Print</a>"; ?></div></td> 
        <td width="5%"><div align="center"> 
          <input type="checkbox" name="checkbox[]" value="<?php echo $row_update['id'] ?>" /> 
          <label for="checkbox"></label> 
        </div></td> 
      </tr> 
      <?php } while ($row_update = mysql_fetch_assoc($update)); ?> 
       
  </table> 
   
  <label for="button"></label> 
  <div align="center"><input type="submit" name="button" id="button" value="Submit" /></div>
</form> 
</body> 
</html>

JKG · September 13, 2011

or try without the Ternary Operators

JKG · September 13, 2011

or if you cant trust your id's: freelance84's suggestion:

<html> 
<head> 
<LINK href="style.css" rel="stylesheet" type="text/css">
<script language="JavaScript">
function checkAll(){
for (var i=0;i<document.forms[0].elements.length;i++)
{
	var e=document.forms[0].elements[i];
	if ((e.name != 'allbox') && (e.type=='checkbox'))
	{
		e.checked=document.forms[0].allbox.checked;
	}
}
}
</script>
</head> 

<body> 
<form id="form1" name="form1" method="post" action="handler.php"> 
<div align="center"><h1>Unprocessed Applications</h1><input type="submit" name="button" id="button" value="Submit" /></div>
  <table id="mytable" cellspacing="0"> 
    <tr> 
      <th scope="col"><strong>Date</strong></th> 
      <th scope="col"><strong>ID</strong></th> 
      <th scope="col"><span class="style1 style3"><strong>First Name</strong></span></th> 
      <th scope="col"><span class="style1 style3"><strong>Last Name</strong></span></th> 
      <th scope="col"><div align="center"><span class="style3"></span></div>Check All -></th> 
      <th scope="col"><div align="center"><input type="checkbox" value="on" name="allbox" onclick="checkAll();"/><br /></div></th>
    </tr> 
     
    <?php $i = 1; do { ?> 
    
      <tr style="background-color:<?php if($i & 1){echo 'black';}else{echo 'black';}?>;">
        <td width="28%"><span class="style1"><?php echo date('F j, Y - g:ia', $row_update['timestamp']);  ?></span></td> 
        <td width="7%"><?php echo $row_update['id']; ?></td> 
        <td width="17%"><?php echo $row_update['first_name']; ?></td> 
        <td width="28%"><?php echo $row_update['last_name']; ?></td>
        <td width="15%"><div align="center"><?php echo "<a href=\"https://www.*******/index.php?id=". $row_update['id']."\" target='_blank'>View & Print</a>"; ?></div></td> 
        <td width="5%"><div align="center"> 
          <input type="checkbox" name="checkbox[]" value="<?php echo $row_update['id'] ?>" /> 
          <label for="checkbox"></label> 
        </div></td> 
      </tr> 
      <?php } while ($row_update = mysql_fetch_assoc($update)); ?> 
       
  </table> 
   
  <label for="button"></label> 
  <div align="center"><input type="submit" name="button" id="button" value="Submit" /></div>
</form> 
</body> 
</html>

Pandemikk · September 13, 2011

That bitwise comparison is actually better than the even and odds solution I provided. It's a bit cleaner and faster. You should use that on your ID's if you can trust them, or on $i if you can't.

Try the code I used in place of the <tr> tag within the do loop. If you don't get alternating colors please give us what you see in the view source (for the table). If the HTML is correct we'll know where to go from there.

jhoover · September 13, 2011

They are alternating per the code but the rows are staying all white. Is it the td's of every other row that I want to change? I'm a little confused. I attached a screenshot of what is showing up and a bit of the code below.

<tr style="background-color:black;"> 
        <td width="28%"><span class="style1">July 21, 2011 - 1:40pm</span></td> 
        <td width="7%">45</td> 
        <td width="17%">ergerg</td> 
        <td width="28%">ergerg</td> 
        <td width="15%"><div align="center"><a href="https://www.midmich.edu/admissions/admin/print/index.php?id=45" target='_blank'>View & Print</a></div></td> 
        <td width="5%"><div align="center"> 
          <input type="checkbox" name="checkbox[]" value="45" /> 
          <label for="checkbox"></label> 
        </div></td> 
      </tr> 
       
    
      <tr style="background-color:white;"> 
        <td width="28%"><span class="style1">July 21, 2011 - 1:43pm</span></td> 
        <td width="7%">46</td> 
        <td width="17%">sdcsdc</td> 
        <td width="28%">sdvsdv</td> 
        <td width="15%"><div align="center"><a href="https://www.midmich.edu/admissions/admin/print/index.php?id=46" target='_blank'>View & Print</a></div></td> 
        <td width="5%"><div align="center"> 
          <input type="checkbox" name="checkbox[]" value="46" /> 
          <label for="checkbox"></label> 
        </div></td> 
      </tr> 
       
    
      <tr style="background-color:black;"> 
        <td width="28%"><span class="style1">July 21, 2011 - 1:43pm</span></td> 
        <td width="7%">47</td> 
        <td width="17%">sdcsdc</td> 
        <td width="28%">sdvsdv</td> 
        <td width="15%"><div align="center"><a href="https://www.midmich.edu/admissions/admin/print/index.php?id=47" target='_blank'>View & Print</a></div></td> 
        <td width="5%"><div align="center"> 
          <input type="checkbox" name="checkbox[]" value="47" /> 
          <label for="checkbox"></label> 
        </div></td> 
      </tr> 
       
    
      <tr style="background-color:white;"> 
        <td width="28%"><span class="style1">July 21, 2011 - 1:53pm</span></td> 
        <td width="7%">48</td> 
        <td width="17%">fake</td> 
        <td width="28%">name</td> 
        <td width="15%"><div align="center"><a href="https://www.midmich.edu/admissions/admin/print/index.php?id=48" target='_blank'>View & Print</a></div></td> 
        <td width="5%"><div align="center"> 
          <input type="checkbox" name="checkbox[]" value="48" /> 
          <label for="checkbox"></label> 
        </div></td> 
      </tr>

[attachment deleted by admin]

JKG · September 13, 2011

Is it still within <table></table>?

Have you any CSS styles that could be overriding this? A CSS reset?

xyph · September 13, 2011

The TR tag isn't supposed to have a background. Use something like this instead

<?php 

?>
<style type="text/css">
tr.row1 td {
background-color: grey; color: black;
}
tr.row2 td {
background-color: darkgrey; color: black;
}
</style>
<table>
<tr class="row1"><td>foo</td><td>bar</td></tr>
<tr class="row2"><td>hello</td><td>world</td></tr>
<tr class="row1"><td>foo</td><td>bar</td></tr>
<tr class="row2"><td>hello</td><td>world</td></tr>
</table>

jhoover · September 13, 2011

This is the .css I'm including.

body {
font: normal 11px auto "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
color: #4f6b72;
background: #BCD2EE;
}

a {
color: #c75f3e;
}

#mytable {
width: 780px;
padding: 0;
margin-left: auto;
margin-right: auto;
}

caption {
padding: 0 0 5px 0;
width: 700px;	 
font: italic 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
text-align: right;
}

th {
font: bold 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
color: #4f6b72;
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
border-top: 1px solid #C1DAD7;
letter-spacing: 2px;
text-transform: uppercase;
text-align: left;
padding: 6px 6px 6px 12px;
background: #CAE8EA url(bg_header.jpg) no-repeat;
}

th.nobg {
border-top: 0;
border-left: 0;
border-right: 1px solid #C1DAD7;
background: none;
}

td {
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
background: #fff;
padding: 6px 6px 6px 12px;
color: #4f6b72;
font: normal 13px auto "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
}

row1 {
background: #F5FAFA;
color: #797268;
}

row2 {
background: #fff;
color: #4f6b72;

}

td.alt {
background: #F5FAFA;
color: #797268;
}

th.spec {
border-left: 1px solid #C1DAD7;
border-top: 0;
background: #fff url(images/bullet1.gif) no-repeat;
font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
}

th.specalt {
border-left: 1px solid #C1DAD7;
border-top: 0;
background: #f5fafa url(images/bullet2.gif) no-repeat;
font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
color: #797268;
}

JKG · September 13, 2011

putting the background colour through a class or inline is still giving it a style...

and either way works.

and in your css, you need to have a dot before row1 and row2

like

.row1

.row2

to give it a selector.

jhoover · September 13, 2011

So does that mean that something is overriding it?

JKG · September 13, 2011

can you dump the entire html output?

xyph · September 13, 2011

Did you just ignore my solution?

You're trying to do something the HTML spec doesn't allow when you give a <tr> a background color.

JKG · September 13, 2011

instead of style you could go old school. Down the bgcolor="#000000" instead of style="" route.

http://www.w3schools.com/tags/att_tr_bgcolor.asp

xyph · September 13, 2011

Keep in mind that's a depreciated attribute, though that doesn't mean anything for the most part. Just figured I'd point out from a standards perspective, this is the wrong solution.

Psycho · September 13, 2011

As xyph has stated the table row (i.e. <tr>) does not official support a background color. It will work in some browsers though, but it is not a good idea to use it. Instead, here is the approach you should take:

Give the rows (tr tags) alternating classes. Then define properties of the TDs that are children of those classes.

Example

    .odd_row td { background-color: #cecece; }
    .even_row td { background-color: #eeeeee; }

Now, you will be applying a background color to the TD tags using a class identifier for the TR tag! No need to apply styles to each and every TD tag.

<tr class="odd_row">
    <td>Cell 1</td>
    <td>Cell 2</td>
    <td>Cell 3</td>
    <td>Cell 4</td>
</tr>

Fully working example script

<?php

$max_rows = 10;
$tableOutput = '';
$trClass = false;
for($row=0; $row<$max_rows; $row++)
{
    $trClass = ($trClass=='odd_row') ? 'even_row' : 'odd_row';
    $tableOutput .= "<tr class=\"{$trClass}\">\n";
    $tableOutput .= "<td>One</td><td>Two</td><td>Three</td><td>Four</td>\n";
    $tableOutput .= "</tr>\n";
}

?>
<html>
  <head>
    <Style>
    .odd_row td { background-color: #cecece; }
    .even_row td { background-color: #eeeeee; }
    </style>
  </head>
  <body>

  <table>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
      <th>Column 4</th>
    </tr>
    <?php echo $tableOutput; ?>
  </table>

  </body>
</html>

Sign In

Alternating Row Colors

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information