I am working on improving the visual appeal of table rows. The data in table rows is generated dynamically and has lots of information. There is a column in that table which gives the time when that particular information row was issued. On the basis of the days/months etc before which the information was issued, I have to color the different rows.
Develop classnames and associated CSS directives to give the various visual effects you want. Test out your CSS with hard-coded HTML.
Build your real table with :
<td class="time"> (your time cell in each row)
<td class="aaaa"> (your other key data cell in each row)
Now start to develop your jQuery. The general format of the code will be :
var $this = $(this);
var timeValue = $this.find('td.time').html();//the value in the time cell in this row
var aaaaValue = $this.find('td.aaaa').html();//the value some other cell in this row
By implementing the tests in functions (time_class() and sidebar_class() above), you will keep the master routine nice and clean.
Thank you for the reply airshow. Actually the problem is, I already have that table coded for by the other fellow.I have take it on from there.So basically I have to put a loop and compare the time values from the cells of each tr to the certain values,according to which the color would change.So, if you could help me with that. Thanks.
Thanks a lot for giving it a thought. But yeah the time can be from 0 minutes to 59 minutes. then it goes into hours like 17hours ago 23 hours ago and then days like, 4days ago till 30 days. and then goes into months.but the inter-conversion isnt really important.So even if I can put, say 2 color changes.just experimentation like I said.
OK, the string probably needs processing to find an actual date/time. This may be necessary because Month length varies (29/30/31 days).
However, if your color coding requirement goes to a maximum at less than a month then interpreting the sting simplifies considerably.
Another line of thought ... when the "xxxx ago" string is built (server-side), presumably it starts out as a date (in PHP, JSP, ASP or whatever). If you have access to the server-side source, then we code the original date invisibly into the HTML and avoid having to parse out the "xxxx ago" string to get back to the date. That would be ideal but clearly only possible if you control the server-side source, not if you screen-scrape.
I'm away for a few hours, will look in again when I get back.
Hey airshow. Thanks a lot. It worked absolutely fine. But I want to implement it as a server side thing from where the date is actually coming. Could you tell me how to go about it. as this method sure works but doesnt count for the changes we might make in future. Thanks
If you want to do the whole thing server-side then, you need to build your HTML to achieve similar to what is performed client-side by my code above. ie. add a className to each <td class="time"> to give it additional style directives. Choose the stylename in accordance with the staleness of the data, eg. <td class="time staleness_X"> .
Of course, this server-side approach would provide strictly one-off styling for the page. With a little extra work, the client-side approach would allow the color coding to be "live", ie. to change colors as the data gets staler and staler without refreshing the page. Given the nature of the data, I think that would be an end-user expectation.
To facilitate that, you would need to go back to my earlier idea of encoding time-stamps in the HTML. By far the simplest encoding is a UNIX epoch representation of the time. ie, seconds since 1 January 1970. This is available in just about all server-side languages and you may well be using it already to perform date subtraction where the "xxx ago" string is computed, and/or in a database 'timestamp' field.
You can encode a time-stamp as a custom attribute of the table row or table cell to which it applies.
<tr class="..." timestamp="1326966381">...</tr>
var timestamp = new Date(Number($('tr-selector').attr('timestamp')) * 1000);
You then have many Date() methods available to you for the client-side testing, manipulation and display of the timestamp.