Получить следующее ближайшее время из таблицы на основе выбранных часов и минут

Question

У меня есть длинная таблица со столбцами данных расписания, которые я загружаю через форму с помощью jQuery load(). У меня есть доступ к этим HTML-страницам с данными таблицы и я могу добавить классы / атрибуты данных и т. Д.

Моя форма имеет select поля для часов и минут (по умолчанию текущее время), и я пытаюсь получить следующий ближайший раз плюс четыре после этого.

Все данные времени в моих таблицах отформатированы как <td>H:MM</td>.

В идеале с jQuery мне было интересно, как я могу удалить данные таблицы всего, кроме тех времен. В качестве альтернативы, поскольку я могу переформатировать эти данные, я бы упростил свою жизнь, чтобы отформатировать их определенным образом?

Вещи, которые я пробовал - По общему признанию, я новичок в js, поэтому эти вещи могут показаться глупыми:

• Чтение первого символа каждой ячейки и сравнение его с выбранный час. Это очевидно проблема с 10, 11, 12 и является действительно интенсивно (это мобильный сайт)
• Использование одного поля времени select затем Создание массива каждого столбец для сравнения с выбранным временем. Не могу заставить это работать а также создает проблему с необходимостью использовать один выбор для каждый раз.

В основном ищем небольшое руководство о том, как этого добиться, за исключением или, возможно, включая копирование всех HTML-таблиц в формат JSON ...

Answer 1

Можно также опубликовать http://jsbin.com/ozebos/16/edit, хотя меня избили:)

Основной режим работы аналогичен @ nrabinowitz

1. При загрузке, каким-то образом анализировать строки времени и добавлять к data в каждой строке
2. В фильтре (то есть пользователь манипулирует формой) выбранное время анализируется аналогичным образом. Строки фильтруются по row.data('time') >= chosen_time
3. Полученный массив элементов ограничен 5 (ближайшее время плюс четыре в соответствии с запрошенным OP), используя .slice(0, 5)
4. Все строки скрыты, эти строки отображаются.

Были сделаны некоторые предположения, поэтому этот код служит только указателем на решение.

Answer 2

Я подумал, что это интересный вопрос, поэтому я собрал jsFiddle здесь: http://jsfiddle.net/nrabinowitz/T4ng8/

Основные шаги здесь:

1. Анализ данных временизаранее и хранить с помощью .data().Чтобы упростить сравнение, я предлагаю сохранить данные времени в виде числа с плавающей запятой, используя parseFloat(hh + '.' + mm).

2. В вашем обработчике изменений используйте цикл для последовательного перемещения по ячейкам, останавливаякогда вы найдете индекс ячейки со значением time выше, чем выбранное вами время.Уменьшите индекс, поскольку вы зашли на один шаг слишком далеко

3. Используйте .toggle(i >= index && i < index+4) в цикле .each(), чтобы скрыть и отобразить соответствующие строки.

Answer 3

Вот как это сделать на стороне клиента. Это всего лишь набросок, но он должен дать вам представление.

// Create a sorted array of times from the table
var times = []
$('#mytable td').each(function(cell) {
  times.push(cell.innerHTML);
});
times.sort();

// Those times are strings, and they can be compared, e.g. '16.30' > '12.30' returns true. 
var currentTime = '12:30' // you probably need to read this from your select
var i = 0;
while (times[i] < currentTime || i=times.length) {
  i++;
}

var closestTime = times[i];
var closestTimes = times.slice(i, i+4);

Если вы хотите получить доступ не к временам, а к ячейкам, содержащим время, вы можете найти их следующим образом:

$('#mytable td').each(function() {
  if ($(this).text() in closestTimes) {
    // do something to that cell
  }
})