PDA

View Full Version : 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
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:


<!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:


<?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):


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

right before:


$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.