alternating rows [Solved]

[aarbee]

Hallo,

I have a new question.

How can I create alternating rows in the schedule page?

It is not really needed, but it could very nice to have.

I tried some php code, but phpvms probably didn't like it. ;-)

[Sava]

You mean changing the bg colors of every other row in a table?

[aarbee]

Yes.

One row white, and the other row, light grey.

[Sava]

#div_name_here tr:nth-child(even)    { background-color:#eee; }

change the div_name_here to the name of the DIV which contains the table.

You can change (even) to (odd) if you want to change the color of the first row.

The structure for the table should be

<tr>

The end result: http://www.airserbiavirtual.com/index.php/schedules/view

<td></td>

</tr>

etc.

[aarbee]

Thank you.

But now all is staying white.

I guess that I doing something wrong.

I had added this in the top of the schedules.tpl

<style>
#Schedules tr:nth-child(even)	 { background-color:#eee; }
</style>

Somewhere I started the table header

<table width="100%" bgcolor="silver" border="0" id="tabledlist" class="tablesorter"-->
<tr bgcolor="silver">
<TD bgcolor="#cccccc"><b>Flight</TD>
<TD><b>From</TD>
<TD><b>To</TD>
<TD><b>Dep.<BR />time</b></TD>
<TD><b>Arr.<BR />time</b></TD>
<TD><b>Flight<BR />info</b></TD>
<TD><b>Plane</b></TD>
<TD><b>Sched days</b></TD>
<TD><b>Pilot<BR />Info</b></TD>
<TD><b>Info</b></TD>
</tr>

And later I added a the <div-tags>

div id="Schedules">
<tr>
<TD title="<?php echo ''.$route->route.''?>"><a href="<?php echo url('/schedules/details/'.$route->id);?>"><?php echo $route->code . $route->flightnum?></TD>
<TD title="<?php echo ''.$route->depname.''?>"><?php echo ''.$route->depicao.''?></TD>
<TD title="<?php echo ''.$route->arrname.''?>"><?php echo ''.$route->arricao.''?></TD>
<TD><?php echo $route->deptime;?></TD>
<TD><?php echo $route->arrtime;?></TD>
<TD Title="NM: <?php echo $route->distance;?>"><?php echo $route->flighttime;?> hour</TD>
<TD Title="<?php echo $route->registration;?>"><?php echo $route->aircraft; ?></TD>
<TD><?php echo Util::GetDaysCompact($route->daysofweek); ?></TD>
<TD title="<?php echo ''.$route->notes.''?>"><a href="<?php echo url('/schedules/brief/'.$route->id);?>">Pilot Info</a></TD>
<TD><a href="#" onclick="window.open('<?php echo actionurl('/schedules/boardingpass/'.$route->id.'?newwindow');?>'); return false;">Boarding Pass</a></TD>
</tr>
</div>

I wonder where I am going wrong.

Thanks in advance, anyway.

[Sava]

Your code is a mess.

First of all put the css code to one of your styles, for example the style.css located in your skin folder. What you have now won't work.

Also, you have to have <div> tags out of the foreach loop code or else it will close the div and open it for every single line of the table.

I can't write the exact code for you as PHP isn't outputted in the source code etc. but I can give you general pointers that will get you up to speed.

Just watch out for the PHP parts and where those need to go.

<table width="100%" border="0" id="tabledlist" class="tablesorter"-->
<tr bgcolor="#87cefa">
<TD><b>Flight</TD>
<TD><b>From</TD>
<TD><b>To</TD>
<TD><b>Dep.<BR />time</b></TD>
<TD><b>Arr.<BR />time</b></TD>
<TD><b>Flight<BR />info</b></TD>
<TD><b>Plane</b></TD>
<TD><b>Sched days</b></TD>
<TD><b>Pilot<BR />Info</b></TD>
<TD><b>Info</b></TD>
</tr>
<!--table id="tabledlist" class="tablesorter"-->
<thead>
</thead>
<tbody>
<?php code that you have here (ie. the loop) ?>
.....
</table>

change everything starting from the first line from above to (and with) the ending </table> tag with

<div id="Schedules">
<table width="100%" border="0" id="tabledlist" class="tablesorter">
<thead>
<tr>
<TD><b>Flight</b></TD>
<TD><b>From</b></TD>
<TD><b>To</b></TD>
<TD><b>Dep.<BR />time</b></TD>
<TD><b>Arr.<BR />time</b></TD>
<TD><b>Flight<BR />info</b></TD>
<TD><b>Plane</b></TD>
<TD><b>Sched days</b></TD>
<TD><b>Pilot<BR />Info</b></TD>
<TD><b>Info</b></TD>
</tr>
<!--table id="tabledlist" class="tablesorter"-->
</thead>
<tbody>
<?php all the php that you had before...the loop etc... ?>
<tr>
<TD title="<?php echo ''.$route->route.''?>"><a href="<?php echo url('/schedules/details/'.$route->id);?>"><?php echo $route->code . $route->flightnum?></TD>
<TD title="<?php echo ''.$route->depname.''?>"><?php echo ''.$route->depicao.''?></TD>
<TD title="<?php echo ''.$route->arrname.''?>"><?php echo ''.$route->arricao.''?></TD>
<TD><?php echo $route->deptime;?></TD>
<TD><?php echo $route->arrtime;?></TD>
<TD Title="NM: <?php echo $route->distance;?>"><?php echo $route->flighttime;?> hour</TD>
<TD Title="<?php echo $route->registration;?>"><?php echo $route->aircraft; ?></TD>
<TD><?php echo Util::GetDaysCompact($route->daysofweek); ?></TD>
<TD title="<?php echo ''.$route->notes.''?>"><a href="<?php echo url('/schedules/brief/'.$route->id);?>">Pilot Info</a></TD>
<TD><a href="#" onclick="window.open('<?php echo actionurl('/schedules/boardingpass/'.$route->id.'?newwindow');?>'); return false;">Boarding Pass</a></TD>
</tr>
</tbody>
</table>
</div>

[aarbee]

Grazias.

It works.

I thought I had to put the DIV code just above the row.

But I could have figured that one out.

And indeed, I will move the style statement into my stylesheet.

But I wondered if that worked with the special feature in it.

Edit by aarbee.

I forgot to tell you, but I did send a shipload of Kudos to your attick.

[Sava]

Glad it works.

Ask if you need anything more

[aarbee]

Should this work on IE?

It works on FF, but not on my IE.

And it works on an iPad.

[Tom]

Should this work on IE?

It works on FF, but not on my IE.

And it works on an iPad.

IE doesn't support CSS3

If you're working in schedule_results.tpl you can do the following:

Before the foreach loop add:

$row = 0;

Then in the <tr> add:

class="row<?php echo $row; ?>"

And then just before the end of the foreach loop:

$row = 1 - $row;

Then you can style them using:

.row0{background:#fff;}

.row1{background:#f2f2f2;}

[aarbee]

Was a little hassle to fiddle out where to place the $row = 1 - $row;, but... it works like a charm now.

Anyway, look in the attick or cellar, I junked in a pile of kudos as well.

BTW, how do I close this post?

[Sava]

You can't. Just add [sOLVED] to the topic title

[aarbee]

Uhm Yeah.

Thought so, but I wonder where I can change that. I was not to clear in my question. Sorry for that.

I do not see the option, when I edit the top post.

[Sava]

You have to edit the first post, click more reply options and change it from there.

[aarbee]

thanks