jhoover Posted September 13, 2011 Share Posted 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> Quote Link to comment Share on other sites More sharing options...
JKG Posted September 13, 2011 Share Posted September 13, 2011 where are your classes for alternating? are you using css? Quote Link to comment Share on other sites More sharing options...
freelance84 Posted September 13, 2011 Share Posted September 13, 2011 if($i & 1) {//row colour is this} else{//row colour is this} Quote Link to comment Share on other sites More sharing options...
Pandemikk Posted September 13, 2011 Share Posted 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 Quote Link to comment Share on other sites More sharing options...
jhoover Posted September 13, 2011 Author Share Posted 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. Quote Link to comment Share on other sites More sharing options...
JKG Posted September 13, 2011 Share Posted 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> Quote Link to comment Share on other sites More sharing options...
JKG Posted September 13, 2011 Share Posted September 13, 2011 or try without the Ternary Operators <tr style="background-color:<?php if ($row_update['id'] % 2){ echo 'black'; } else { echo 'white'; }?>;"> Quote Link to comment Share on other sites More sharing options...
JKG Posted September 13, 2011 Share Posted 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> Quote Link to comment Share on other sites More sharing options...
Pandemikk Posted September 13, 2011 Share Posted 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. Quote Link to comment Share on other sites More sharing options...
jhoover Posted September 13, 2011 Author Share Posted 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] Quote Link to comment Share on other sites More sharing options...
JKG Posted September 13, 2011 Share Posted September 13, 2011 Is it still within <table></table>? Have you any CSS styles that could be overriding this? A CSS reset? Quote Link to comment Share on other sites More sharing options...
xyph Posted September 13, 2011 Share Posted 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> Quote Link to comment Share on other sites More sharing options...
jhoover Posted September 13, 2011 Author Share Posted 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; } Quote Link to comment Share on other sites More sharing options...
JKG Posted September 13, 2011 Share Posted 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. Quote Link to comment Share on other sites More sharing options...
jhoover Posted September 13, 2011 Author Share Posted September 13, 2011 So does that mean that something is overriding it? Quote Link to comment Share on other sites More sharing options...
JKG Posted September 13, 2011 Share Posted September 13, 2011 can you dump the entire html output? Quote Link to comment Share on other sites More sharing options...
xyph Posted September 13, 2011 Share Posted 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. Quote Link to comment Share on other sites More sharing options...
JKG Posted September 13, 2011 Share Posted 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 Quote Link to comment Share on other sites More sharing options...
xyph Posted September 13, 2011 Share Posted 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. Quote Link to comment Share on other sites More sharing options...
Psycho Posted September 13, 2011 Share Posted 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> Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.