Change a table cell's colour for 7 days

**moose86** · 08-05-2013, 08:07 PM

Hi,

I have a table

ROW 1	ROW 1
ROW 2	ROW 2

I would like it so that ROW 1 changes colour for 7 days (week 1) THEN
ROW 2 changes colour for 7 days (week 2) and it keeps on alternating between the 2 rows

But im not entirely sure how to go about this, i have googled but not found anything for changing for a # of days, just ones that change on certain days of the week

Any help would be greatly appreciated, thanks

**jscheuer1** · 08-05-2013, 08:43 PM

This would be much easier to do server side if you have PHP available, as the PHP date function can return the week number and that way it would be the same for everybody.

Using javascript we could use the Date Object, but would have to calculate the week number, as it has no native function for that. Or we could set a cookie for 7 days, when it expired the colors could change and a new cookie could be set. Both methods rely upon the user's computer and would have some variation depending upon the user's timezone, and in the case of cookies, just when they visited and whether or not they have cookies enabled.

So, do you have PHP available on your host?

**moose86** · 08-05-2013, 09:23 PM

Originally Posted by jscheuer1

So, do you have PHP available on your host?

I do yer, thnks for the replay, i will go on a search and do it the way you suggested

**jscheuer1** · 08-05-2013, 09:30 PM

OK, well here's a way to do it via javascript:

Code:

<!DOCTYPE html>
<html>
<head>
<title> Week Table Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<table id="mytable">
<tr>
<td>ROW 1</td><td>ROW 1</td>
</tr>
<tr>
<td>ROW 2</td><td>ROW 2</td>
</tr>
</table>
<script type="text/javascript">
var table = document.getElementById('mytable'),
d = new Date(), y = d.getFullYear(), weeknum = 1, rownum;
while(d.getFullYear() === y){
	d.setDate(d.getDate() - 7);
	++weeknum;
}
rownum = weeknum % 2;
table.rows[rownum].style.backgroundColor = 'yellow';
</script>
</body>
</html>

I'll have a PHP version in a minute or two.

**jscheuer1** · 08-05-2013, 09:37 PM

And here's a way to do it using PHP:

Code:

<?php
$weeknum = date("W");
$rownum = $weeknum % 2;
?>
<!DOCTYPE html>
<html>
<head>
<title>PHP Week Table</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
#row<?php echo $rownum; ?> {
	background-color: yellow;
}
</style>
</head>
<body>
<table>
<tr id="row0">
<td>ROW 1</td><td>ROW 1</td>
</tr>
<tr id="row1">
<td>ROW 2</td><td>ROW 2</td>
</tr>
</table>
</body>
</html>

**moose86** · 08-05-2013, 09:55 PM

Thanks for that, im not that great with php, i only understand it to a point, i get confused at the "% 2" bit, could u explain that plz and does that alternate between the rows every monday?

**jscheuer1** · 08-05-2013, 10:14 PM

Whether it's PHP or javascript, the % sign is, when used as an arithmetic operator, known in regular math as modulo. The modulus of a number by another number is the remainder after dividing by that number. Using modulo 2 gives 0 if it's an even number and 1 if it's an odd number.

The first day of the week is Sunday, so I would say Sunday, not Monday. But in PHP 5 where they added "N" as a possible formatting for date(), 1 = Monday and 7 = Sunday, so I guess it might work out, you would have to test it, and tweak it if it changed on Sunday, that is if Sunday isn't acceptable. Something like (or an equivalent for PHP < 5):

Code:

if(date("N") == 7){++weeknum;}

right before:

Code:

$rownum = $weeknum % 2;

But you would have to first make sure it wasn't already changing on Monday.

**moose86** · 08-05-2013, 10:22 PM

Ok i will give it a go and thank you, i love getting help from this forum as I ALWAYS get the answer I was looking for

, thanks again

**jscheuer1** · 08-06-2013, 02:33 AM

I just did a quick check in PHP 5.3.0 and in it the week starts with Monday, so you're probably good. I run a WAMP localhost server, so all I had to do was set my date back one day, and viola - it was Sunday, and the row changed, meaning that Monday is the first day of a new week.