jQuery highlight row within specific time

Question

I am trying to highlight a row, when it's within a specific time range. So actually let's say its 10:00:00 and i need to mark the row, if the time is between the start end the enddate-row.

the table:

<table class="table table-striped" id="timeTable">
  <thead>
    <th>Title</th>
    <th>Start</th>
    <th>End</th>
    <th>Channel</th>
  </thead>
  <tbody>
    <tr>
      <td>Title 1</td>
      <td class="dateRowStart">2016-08-10 09:00:00+02</td>
      <td class="dateRowEnd">2016-08-10 11:00:00+02</td>
      <td>Channel 1</td>
    </tr>
    <tr>
      <td>Title 2</td>
      <td class="dateRowStart">2016-08-10 09:30:00+02</td>
      <td class="dateRowEnd">2016-08-10 12:00:00+02</td>
      <td>Channel 3</td>
    </tr>
    <tr>
      <td>Title 4</td>
      <td class="dateRowStart">2016-08-10 13:00:00+02</td>
      <td class="dateRowEnd">2016-08-10 15:00:00+02</td>
      <td>Channel 4</td>
    </tr>
  </tbody>
</table>

The dateformat is the output of my postgresql db. It would be great if I could show them in our local time format (10.08.2016 - 14:15:12) but thats not my main issue here.

my (only half complete) js code to highlight:

<script>
$('#timeTable .dateRowStart').each(function () {
  var dtTd = new Date($(this).html());
  var dtNew = new Date();
  if (dtNew.getTime() < dtTd.getTime()) {
    $(this).parent('tr').addClass('highlight');
  } 
});

</script>

I don't know how to include dateRowEnd to check, if the date is still between the start/end-time. If I'm using two identical time/dates with dateformat eg. "08/10/2016 10:05:00", I'm only getting one row marked., that's the other annoying thing.

Thank you!

Are you just interested in the time, or the time on the specific date provided? — Rory McCrossan, Aug 11 '16 at 14:33
Hm, I don't understand your question :) I need to highlight the row, when the Starttime is <= current Time and EndTime is >= current Time — bingobear, Aug 11 '16 at 14:36
My point is that the dates are different in your example. Today is 11th Aug, your dates are the 10th. — Rory McCrossan, Aug 11 '16 at 14:37
ok, no I have them with the actual date in my editor. So in this example it was just a copy/paste from a yersterdays db entry, sorry! my fault — bingobear, Aug 11 '16 at 14:40
I'm still not sure what you're trying to achieve, but hopefully this should help. Note that I amended the last date to work in my local time zone: https://jsfiddle.net/zbz14uuo/ — Rory McCrossan, Aug 11 '16 at 14:42
To clarify: I need to highlight the row, when the current Time is between Starttime and EndTime — bingobear, Aug 11 '16 at 14:42
Again - is that for any day, or only when the day matches the full date of the value? — Rory McCrossan, Aug 11 '16 at 14:47
only for the current day. I grab this data from a tv station and I have a table with all the running shows at this current day. I need to highlight the current running show. So every show with the current Time between dateRowStart and dateRowEnd should be highlighted. — bingobear, Aug 11 '16 at 14:56
moment.js might work for formatting? http://momentjs.com/ Consider putting the date in a data attribute as you have it, then format that data element for the text so you can have any format without a challenge to the original data — Mark Schultheiss, Aug 11 '16 at 15:15

score 2 · Accepted Answer · edited May 23 '17 at 12:33

2

You could add a class to the <tr> tags themselves and then do:

HTML:

<tbody>
  <tr class="dateRow">
    <td>Title 1</td>
    <td class="dateRowStart">2016-08-10 09:00:00+02</td>
    <td class="dateRowEnd">2016-08-10 11:00:00+02</td>
    <td>Channel 1</td>
  </tr>
  ...
</tbody>

jQuery:

$('#timeTable').find('.dateRow').each(function () {
  var dtStart = new Date($(this).find(".dateRowStart").text());
  var dtEnd = new Date($(this).find(".dateRowEnd").text());
  var dtNew = new Date();
  if (dtNew >= dtStart && dtNew <= dtEnd) {
    $(this).addClass('highlight');
  } 
});

Note you only have to use .getTime() if you're doing ==, !=, ===, and !== on Date objects as seen here.

Edit: As @MarkSchultheiss suggested, separating $('#timeTable .dateRow') into $('#timeTable').find('.dateRow') has a slight efficiency boost.

edited May 23 '17 at 12:33

Community

1
1

answered Aug 11 '16 at 14:43

Patrick Barr

1,123
7
17

As for removing the highlighting if the time is passed when still on the page, look into how to [call a javascript function at a specific time of day](http://stackoverflow.com/questions/4455282/call-a-javascript-function-at-a-specific-time-of-day). And pass `$(this)` into the function so that you can reference it to call `.removeClass('highlight')` on it. – Patrick Barr Aug 11 '16 at 14:56
2

`.text()` might perhaps be better than `.html()` but it's a tossup - and that `[0].` is not needed perhaps? test it... – Mark Schultheiss Aug 11 '16 at 15:03
@MarkSchultheiss good point, I didn't realize that `.text()` filtered out html from the string it returns. I haven't tested the `[0]` yet, I assumed that because I was selecting for classes that it would be returned as an array. – Patrick Barr Aug 11 '16 at 15:12
Update, thanks @MarkSchultheiss for pointing out the two issues in the answer I posted. – Patrick Barr Aug 11 '16 at 15:18
1

`Uncaught TypeError: $(...).find(...)[0].text is not a function` - use the `.eq(0)` instead here if you desire that isolation – Mark Schultheiss Aug 11 '16 at 15:18
Thank you for your answers! I tried to replicate it in jsfiddle, but I had no luck. Maybe I have just overlooked something... https://jsfiddle.net/kmdd14gr/3/ – bingobear Aug 11 '16 at 15:22
1

Just a side note, `$('#timeTable').find('.dateRow')` would be slightly faster but that is micro optimization that only shows up with a very large DOM. This is due to the right to left functionality of the sizzle engine processing. – Mark Schultheiss Aug 11 '16 at 15:23
@bingobear try it again without the `[0]` as @MarkSchultheiss suggested, you won't need to add in the `.eq(0)` unless you plan to have multiple `dateRowStart` and `dateRowEnd` in your rows. Also make sure that now is actually in one of the ranges. – Patrick Barr Aug 11 '16 at 15:29
Thank you, yes. Now its working. @MarkSchultheiss thank you! So many nice working examples. Thanks guys! – bingobear Aug 11 '16 at 15:31

Himanshu · Answer 2 · 2016-08-11T16:59:36.253

Check this snippet:

$(function() {
  $('#timeTable .dateRowStart').each(function() {
    var dtTdStart = new Date($(this).text());
    var dtTdEnd = new Date($($(this).siblings('.dateRowEnd')).text());


    var dtNew = new Date();


    if (dtNew > dtTdStart && dtNew < dtTdEnd) {
      $(this).parent('tr').addClass('highlight');
    }
    else{
      $(this).parent('tr').removeClass('highlight');
    }
  });

});

.highlight {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-striped" id="timeTable">
  <thead>
    <th>Title</th>
    <th>Start</th>
    <th>End</th>
    <th>Channel</th>
  </thead>
  <tbody>
    <tr>
      <td>Title 1</td>
      <td class="dateRowStart">2016-08-11 17:00:00+02</td>
      <td class="dateRowEnd">2016-08-11 19:00:00+02</td>
      <td>Channel 1</td>
    </tr>
    <tr class="highlight">
      <td>Title 2</td>
      <td class="dateRowStart">2016-08-11 17:30:00+02</td>
      <td class="dateRowEnd">2016-08-11 18:00:00+02</td>
      <td>Channel 3</td>
    </tr>
    <tr>
      <td>Title 4</td>
      <td class="dateRowStart">2016-08-11 13:00:00+02</td>
      <td class="dateRowEnd">2016-08-11 15:00:00+02</td>
      <td>Channel 4</td>
    </tr>
  </tbody>

You should select only the siblings with the end date class - row titles you do not want, and I do see the `[1]` but...I prefer explicit in case they add a new td or something — Mark Schultheiss, Aug 11 '16 at 15:30

charsi · Answer 3 · 2016-08-11T15:45:05.273

With moment.js you can do --

$('#timeTable .dateRow').each(function () {
  var startTime = $(this).closest("tr").find(".dateRowStart") .text();
  var endTime = $(this).closest("tr").find(".dateRowEnd").text();
  if (moment().isBetween(startTime, endTime)) {
      $(this).addClass('highlight'); 
  } 
});

codepen -- http://codepen.io/anon/pen/OXAEAv

You can also change the date format with moment('orig date').format('MM/DD/YY HH:mm:ss')

jQuery highlight row within specific time

3 Answers3