Jquery and CSS style

Question

If I want to add an CSS style for a field in a table that has the value that is equal to the current time or greater than the current time but it is less than the value of the next field, how can I do this using Jquery?

The sample of table looks like this:

 -----------------------
  field |  current time
 -----------------------
    1   |    05:25
    2   |    07:30
    3   |    09:18
    4   |    10:13
    5   |    12:44

If the current time is 09:50 the field No.4 should have a different background color (If the current time is 05:30 then the field No. 2 , ...)

Thanks for all suggestions.

have you tried anything so far?

JMax
– JMax

2011-09-26 12:55:43 +00:00
Commented Sep 26, 2011 at 12:55 — JMax
– JMax, Commented Sep 26, 2011 at 12:55
Why wouldn't you do that on server side?

archil
– archil

2011-09-26 12:56:45 +00:00
Commented Sep 26, 2011 at 12:56 — archil
– archil, Commented Sep 26, 2011 at 12:56

Royi Namir · Accepted Answer · 2011-09-26 13:07:25Z

1

assuming this is ordered...

1)you should have a function ( myFunc) that can compare times and return if left argument bigger or smaller then the right.

2)you should have a function that returns the 'now' time.

3)each time span should be wrap with class .time

then in jQuery : each time should be wrap with class .time

   $(".time").each(function (){
    if (myfunc ($(this).text(),now())=='bigger')

{
 $(this).css('color','red');
return false;
}


    });

edited Sep 26, 2011 at 13:07

answered Sep 26, 2011 at 12:57

Royi Namir

149k145 gold badges502 silver badges833 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Blazemonger · Accepted Answer · 2011-09-26 13:08:13Z

0

Cobbled this together: http://jsfiddle.net/xVDnj/1/ -- It will assign a class "past" or "future" to each table cell depending on whether the given time is before or after the current time (on the same day).

$(document).ready(function() {
    var cdate = new Date();
    $('table tbody tr').each(function() {
        var $tc = $(this).find('td').eq(1)
        var tstr = $tc.text();
        var thour = tstr.split(":")[0];
        var tmin = tstr.split(":")[1];
        var tdate = new Date();
        tdate.setHours(thour,tmin);
        if (tdate-cdate < 0) { 
            $tc.addClass('past');
        } else {
            $tc.addClass('future');
        }
    });
});

answered Sep 26, 2011 at 13:08

Blazemonger

93.3k28 gold badges147 silver badges181 bronze badges

Collectives™ on Stack Overflow

Jquery and CSS style

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related