Mam długi stół z kolumnami danych harmonogramu, które ładuję za pomocą formularza z jQuery load(). Mam dostęp do tych stron HTML za pomocą danych tabeli i mogą dodawać klasy / atrybuty danych itp.

Moja forma ma pola select przez wiele godzin i minut (domyślnie do bieżącego czasu) i próbuję uzyskać następny najbliższy czas plus cztery.

Dane czasowe w moich tabelach są sformatowane jako <td>H:MM</td>.

Idealnie z jQuery zastanawiałem się, jak mogę usunąć dane stołu wszystkiego, ale te czasy. Alternatywnie, ponieważ mogę sformatować te dane, czy moje życie łatwiej było formatować w określony sposób?

rzeczy, które próbowałem - jestem przyzwoitym nowicjuszem JS, więc te rzeczy mogą wydawać się głupie:

  • Czytanie pierwszego znaku każdej komórki i porównuje go do wybranej godziny. Jest to oczywiście problem z 10, 11, 12 i jest naprawdę intensywny (jest to strona mobilna)
  • Korzystanie z jednego czasu select pola, zapewnia tablicę każdego Kolumna do porównania z wybranym czasem. Nie mógł uzyskać tego pracy a także tworzy problem z koniecznością użycia pojedynczego wyboru każdego razu.

Zasadniczo szukasz niewielkich wskazówek na temat tego, jak uzyskać tę pracę, a może włącznie, skopiując wszystkie stoły HTML w formacie JSON ...

0
Gregg B 1 grudzień 2011, 03:33

3 odpowiedzi

Najlepsza odpowiedź

Myślałem, że to interesujące pytanie, więc umieściłem JSFiddle tutaj: http://jsfiddle.net/nrabinowit/ T4NG8 /.

Podstawowe kroki to:

  1. Przelicz dane czasowe przed czasem i przechowuj za pomocą .data(). Aby ułatwić porównanie, sugeruję przechowywanie danych czasowych jako pływaka, przy użyciu parseFloat(hh + '.' + mm).

  2. W komplecie zmianie, użyj pętli, aby przejść przez komórki w sekwencji, zatrzymując się po znalezieniu indeksu komórki za pomocą wartości time wyższą niż wybrany czas. Zmniejsz indeks, ponieważ poszedłeś o krok za daleko

  3. Użyj .toggle(i >= index && i < index+4) w pętli .each(), aby ukryć i pokazać odpowiednie wiersze.

1
nrabinowitz 1 grudzień 2011, 00:19

Maj jako dobrze post http://jsbin.com/ozebos/16/edit, choć byłem pobity :)

Podstawowy tryb działania jest podobny do @nrabinowitz

  1. On Load, analizuj ciągi w jakiś sposób i dodaj do data na każdym rzędzie
  2. Na filtrze (I.e. Użytkownik manipuluje formularz), wybrany czas jest analizowany w ten sam sposób. Wiersze są filtrowane row.data('time') >= chosen_time
  3. Uzyskany zestaw elementów ograniczonych do 5 (najbliższy czas plus cztery, ponieważ OP żądano) przy użyciu .slice(0, 5)
  4. Wszystkie wiersze są ukryte, wyświetlane są te wiersze.

Wykonano pewne założenia, więc ten kod służy wyłącznie jako wskaźnik do rozwiązania.

2
Rob Cowie 1 grudzień 2011, 01:10

Oto jak zrobić to po stronie klienta. To tylko zarys, ale powinien dać ci pomysł.

// 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);

Jeśli chcesz uzyskać dostęp do czasów, ale w rzeczywistości komórki zawierające czasy, możesz je znaleźć:

$('#mytable td').each(function() {
  if ($(this).text() in closestTimes) {
    // do something to that cell
  }
})
0
Devnook 1 grudzień 2011, 00:09