Page 2 of 2 FirstFirst 12
Results 11 to 17 of 17

Thread: How to change table cell background color based on time of day ?

  1. #11
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,377
    Thanks
    77
    Thanked 3,421 Times in 3,382 Posts
    Blog Entries
    12

    Default

    Played around with this even more. Think I'm finished now. This requires/uses only hours and minutes, and can have as many times as you want. Colors may be repeated later with different times. Times should be sequential and fit into/cover a 24 hour period:

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    </head>
    <body>
    <table id="thetable">
    <tr>
    <td>&nbsp;</td>
    </tr>
    </table>
    <script>
    (function(){ // anonymous function wrapper keeps variable and function names out of the global scope
    	var timespans = { // use as many timespans as you want, colors can repeat later with different times, if you run out of letters, you can start over with a1, b1, etc.
    		a: {bgc: "red", start: '0:00', end: '10:05'}, // {bgc: "color", start: 'hour:minute', end: 'hour:minute'}
    		b: {bgc: "blue", start: '10:06', end: '18:15'},
    		c: {bgc: "#00ff00", start: '18:16', end: '23:01'},
    		d: {bgc: "lightblue", start: '23:02', end: '23:59'}
    	}, c, units = ['Hours', 'Minutes', 'Seconds'], the_table = document.getElementById('thetable').style;
    	for (c in timespans) {if(timespans[c].bgc){timespans[c].start += ':00'; timespans[c].end += ':59';}} // automatically add seconds to start and end times
    	function tomillis(cdtime){ // converts start and end colon delimited times to milliseconds since 1970/01/01
    		cdtime = cdtime.split(':');
    		var d = new Date(), l = cdtime.length, t = -1;
    		while(++t < l){
    			d['set' + units[t]](+cdtime[t]);
    		}
    		return d.getTime();
    	}
    	function changetablebg(){
    		var curtime = new Date().getTime(), lim; // current milliseconds since 1970/01/01, var to later hold the current end time
    		for (c in timespans) { // check each timespan to find a match
    			if(timespans[c].bgc && (lim = tomillis(timespans[c].end)) >= curtime && curtime >= tomillis(timespans[c].start)){
    				the_table.backgroundColor = timespans[c].bgc; // if found, set table bg to timespan's bgc
    				setTimeout(changetablebg, lim - curtime + 1500); // run changetablebg one and a half seconds after current end time
    				break;
    			}
    		}
    	}
    	changetablebg(); // initial run of the changetablebg function
    })(); // end anonymous function wrapper
    </script>
    </body>
    </html>
    Ooops, I may have spoken too soon. I just got an idea for an improvement, but will have to mess with it later. But this should do for now.
    Last edited by jscheuer1; 09-11-2017 at 05:21 AM.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  2. The Following User Says Thank You to jscheuer1 For This Useful Post:

    balki (09-18-2017)

  3. #12
    Join Date
    Nov 2014
    Location
    On A Scottish Island
    Posts
    432
    Thanks
    0
    Thanked 54 Times in 50 Posts

    Default

    Looking good John except that you are only using a single cell table. The OP wanted different cells of a multi-celled table to change background colours at certain times, so that needs to be built into your "timespans" array. Also, when a cell changes colour all the other cells should revert to their original background colour as per my origin simple demo.

  4. The Following 2 Users Say Thank You to styxlawyer For This Useful Post:

    balki (09-18-2017),jscheuer1 (09-11-2017)

  5. #13
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,377
    Thanks
    77
    Thanked 3,421 Times in 3,382 Posts
    Blog Entries
    12

    Default

    Quote Originally Posted by styxlawyer View Post
    Looking good John except that you are only using a single cell table. The OP wanted different cells of a multi-celled table to change background colours at certain times, so that needs to be built into your "timespans" array. Also, when a cell changes colour all the other cells should revert to their original background colour as per my origin simple demo.
    "timespans" is an object, but I think an array would be better. I've been playing around with both.

    Like I said, I didn't read the thread. That (targeting td's sequentially with the rest of the td's reverting) would be simple to add. I'll do it soon, thanks. But what's this supposed to look like? A Christmas tree? (Just kidding about the tree, I think, would be a funny looking Christmas tree, right?) How often do the colors change? Do they indicate anything, or are they just for show?
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. The Following User Says Thank You to jscheuer1 For This Useful Post:

    balki (09-18-2017)

  7. #14
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,377
    Thanks
    77
    Thanked 3,421 Times in 3,382 Posts
    Blog Entries
    12

    Default

    OK, think I've got all that covered:

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style type="text/css">
    #td0 {background-color: orange;}
    #td1 {background-color: brown;}
    #td2 {background-color: black;}
    #td3 {background-color: purple;}
    </style>
    </head>
    <body>
    <table id="thetable">
    <tr>
    <td id="td0">&nbsp;</td><td id="td1">&nbsp;</td><td id="td2">&nbsp;</td><td id="td3">&nbsp;</td>
    </tr>
    </table>
    <script>
    "use strict";
    (function(){ // anonymous function wrapper keeps variable and function names out of the global scope
    	var timespans = [ // use as many timespans as you want, colors can repeat later with different times and/or td num
    		{td: 1, bgc: "red", start: '0:00', end: '10:05'}, // {td: 0 index td num, bgc: "color", start: 'hour:minute', end: 'hour:minute'}
    		{td: 3, bgc: "blue", start: '10:06', end: '18:15'},
    		{td: 2, bgc: "#00ff00", start: '18:16', end: '23:01'},
    		{td: 0, bgc: "lightblue", start: '23:02', end: '23:59'}
    	], c, units = ['Hours', 'Minutes', 'Seconds'], the_tds = document.getElementById('thetable').getElementsByTagName('td'), curtd;
    	for (c in timespans) {if(timespans[c].bgc){timespans[c].start += ':00'; timespans[c].end += ':59';}} // automatically add seconds to start and end times
    	function tomillis(cdtime){ // converts start and end colon delimited times to milliseconds since 1970/01/01
    		cdtime = cdtime.split(':');
    		var d = new Date(), l = cdtime.length, t = -1;
    		while(++t < l){
    			d['set' + units[t]](+cdtime[t]);
    		}
    		return d.getTime();
    	}
    	function changetablebg(){
    		var curtime = new Date().getTime(), lim; // current milliseconds since 1970/01/01, var to later hold the current end time
    		for (c in timespans) { // check each timespan to find a match
    			if(timespans[c].bgc && (lim = tomillis(timespans[c].end)) >= curtime && curtime >= tomillis(timespans[c].start)){
    				if(curtd){curtd.backgroundColor = '';}
    				curtd = the_tds[timespans[c].td].style;
    				curtd.backgroundColor = timespans[c].bgc; // if found, set table bg to timespan's bgc
    				setTimeout(changetablebg, lim - curtime + 1500); // run changetablebg one and a half seconds after current end time
    				break;
    			}
    		}
    	}
    	changetablebg(); // initial run of the changetablebg function
    })(); // end anonymous function wrapper
    </script>
    </body>
    </html>
    Might still need tweaking and/or benefit from improvements. Also, still curious about my previous questions -

    Quote Originally Posted by jscheuer1 View Post
    . . . what's this supposed to look like? A Christmas tree? (Just kidding about the tree, I think, would be a funny looking Christmas tree, right?) How often do the colors change? Do they indicate anything, or are they just for show?
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  8. The Following User Says Thank You to jscheuer1 For This Useful Post:

    balki (09-18-2017)

  9. #15
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,377
    Thanks
    77
    Thanked 3,421 Times in 3,382 Posts
    Blog Entries
    12

    Default

    And now, I think the final tweak (I've tried to comment the code adequately, but if anyone has any questions about any particular part of it, feel free to ask):

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style type="text/css">
    /* set each td's default bg color in a stylesheet by id, or use a class or descendant selector if you want them all to default to the same bg color */
    #td0 {background-color: orange;}
    #td1 {background-color: brown;}
    #td2 {background-color: black;}
    #td3 {background-color: purple;}
    </style>
    </head>
    <body>
    <table id="thetable">
    <tr>
    <td id="td0">&nbsp;</td><td id="td1">&nbsp;</td><td id="td2">&nbsp;</td><td id="td3">&nbsp;</td>
    </tr>
    </table>
    <script>
    "use strict";
    (function(){ // anonymous function wrapper keeps variable and function names out of the global scope
    	var timespans = [ // use as many timespans as you want, colors can repeat later with different times and/or td num, times should be sequential
    		{td: 1, bgc: "red", start: '0:00', end: '10:05'}, // {td: 0 index td num, bgc: "color", start: 'hour:minute', end: 'hour:minute'}
    		{td: 3, bgc: "blue", start: '10:06', end: '18:15'},
    		{td: 2, bgc: "#00ff00", start: '18:16', end: '23:01'},
    		{td: 0, bgc: "lightblue", start: '23:02', end: '23:59'}
    	], c = timespans.length, tsl = c, units = ['Hours', 'Minutes', 'Seconds'], // get timespans length, establish units for 'tomillis' conversion
    		the_tds = document.getElementById('thetable').getElementsByTagName('td'), curtd = {}; // reference the td's, establish var for current td (for later use)
    	while (--c > -1) {timespans[c].start += ':00'; timespans[c].end += ':59';} // add seconds to start and end times for more precise processing
    	function tomillis(cdtime){ // converts start and end colon delimited times to milliseconds since 1970/01/01
    		cdtime = cdtime.split(':');
    		var d = new Date(), t = -1;
    		while(++t < 3){	d['set' + units[t]](+cdtime[t]);}
    		return d.getTime();
    	}
    	function changetablebg(){
    		var curtime = new Date().getTime(), lim; // current milliseconds since 1970/01/01, var to later hold the current end time
    		while (++c < tsl) { // check timespan to find a match
    			if((lim = tomillis(timespans[c].end)) >= curtime && curtime >= tomillis(timespans[c].start)){
    				curtd.backgroundColor = ''; // revert previous td (if any) bg to it's default as set in style section
    				curtd = the_tds[timespans[c].td].style; // save refernece to current td
    				curtd.backgroundColor = timespans[c].bgc; // if found, set corresponding td's bg color to timespan's bgc
    				c = -1; // reset c for next run through
    				setTimeout(changetablebg, lim - curtime + 1500); // run again at one and a half seconds after lim (current end time)
    				break; // we've got a match, stop processing
    			}
    		}
    	}
    	changetablebg(); // initial run of the changetablebg function
    })(); // end anonymous function wrapper
    </script>
    </body>
    </html>
    Last edited by jscheuer1; 09-16-2017 at 04:28 AM. Reason: add more comments
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  10. The Following User Says Thank You to jscheuer1 For This Useful Post:

    balki (09-18-2017)

  11. #16
    Join Date
    Nov 2014
    Location
    On A Scottish Island
    Posts
    432
    Thanks
    0
    Thanked 54 Times in 50 Posts

    Default

    That looks good, John.

    I'm not sure what the OP's intention is as he/she seems to more of a lurker only coming back to the thread very occasionally.

  12. #17
    Join Date
    Jun 2011
    Posts
    60
    Thanks
    43
    Thanked 0 Times in 0 Posts

    Default

    Thank you very much for the help!
    I am still adjusting the code using the information provided in the topic.
    When I finish the code I will write again.

Similar Threads

  1. Replies: 0
    Last Post: 02-10-2009, 04:52 PM
  2. how to change text and background color same time
    By ultimate-tester in forum JavaScript
    Replies: 3
    Last Post: 02-27-2008, 08:13 AM
  3. Cell background color change on mouseover
    By Jalpari in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 01-29-2007, 03:22 PM
  4. Replies: 2
    Last Post: 12-25-2005, 11:38 AM
  5. Replies: 2
    Last Post: 04-29-2005, 02:50 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •