Question

I have a long table with columns of schedule data that I’m loading via a form with jQuery load(). I have access to these html pages with the table data and can add classes/data attributes etc.

My form has select fields for hours and minutes (defaulting to the current time) and I’m trying to get the next closest time plus the four after that.

The time data in my tables are all formatted as <td>H:MM</td>.

Ideally with jQuery, I was wondering how I can strip the table data of everything but those times. Alternatively, since I can reformat this data would I be making my life easier to format it a certain way?

Things I’ve tried – I am admittedly a novice at js so these things may seem silly:

• Reading the first character of each cell and comparing it to the
  selected hour. This is obviously a problem with 10, 11, 12 and is
  really intensive (this is a mobile site)
• Using a single time select field thenCreating an Array of each
  column to compare with the selected time. Couldn’t get this working
  and also creates an issue with having to use a single select for
  every time.

Basically looking for a little guidance on how to get this working short of, or maybe including, copying all the html tables into JSON format…

Answer 1

I thought this was an interesting question, so I put together a jsFiddle here: http://jsfiddle.net/nrabinowitz/T4ng8/

The basic steps here are:

1. Parse the time data ahead of time and store using .data(). To facilitate comparison, I’m suggesting storing the time data as a float, using parseFloat(hh + '.' + mm).

2. In your change handler, use a loop to go through the cells in sequence, stopping when you find the index of the cell with a time value higher than your selected time. Decrement the index, since you’ve gone one step too far

3. Use .toggle(i >= index && i < index+4) in an .each() loop to hide and show the appropriate rows.