Filtrowanie danych w tabeli, POMOCY :D

Siemaszko,

Potrzebuję pomocy, raczkuję dopiero w JavaScript, coś tam kumam, ale nie na tyle by poradzić sobie z tym pewnie "prostym" zadaniem.

Chodzi mi o to, by filtrowało tabelę wg. zarobków pracownika (ale!) poprzez przesunięcie suwaka.

Znalazłem instrukcję, jak zrobić coś podobnego, ale jest to pod input=text, więc cały kod do przerobienia, a ja nic nie kumam ;ooo

http://jsfiddle.net/jtV7q/179/ <-- Tutaj jest wszystko co potrzebne.

Oczywiście zależy mi na tym, by po zaznaczeniu np. "2000" w range, pokazało wszystkich do 2000, a nie tylko tych co 2k zarabiają.

Fajnie jak by mi ktoś wytłumaczył jak to zrobić, albo podał gotowe rozwiązania, które przeanalizuję i łatwiej mi będzie zrozumieć, bo to co tutaj mam to czarna magia.

Można to rozwiązać w następujący sposób:

var rows = $('#tabela tr');
$('#kwota').change(function() {	    
      var selectedRange = $(this).val(); 
      
	    rows.show().filter(function() {
          var earnings = $(this).children()[2].innerText;				
          if(!isNaN(earnings)) {
	        	return !(Number(earnings) <= Number(selectedRange));
          }
	    }).hide();
});

To rzeczywiście działa! Dzięki wielkie, a czy mógłbyś mi mniej więcej wytłumaczyć (opisać) krok po kroku dlaczego własnie tak to działa? Jestem zielony, a chciałbym jednak to zrozumieć.

var rows = $('#tabela tr');  // Tutaj są zawarte wszystkie wiersze, łącznie z headerem tabeli.

$('#kwota').change(function() {  // Tutaj stosujemy metodę change(), żeby przy każdej zmianie wartości suwaka mogło się odbywać filtrowanie i ukrywanie wierszy.

var selectedRange = $(this).val();  // Tutaj $(this) odnosi się do suwaka i poprzez funkcje val() pobieramy jego aktualną wartość.

rows.show().filter(function() {  // Tutaj polecam dokumentację jQuery i przejrzenie metod show(), filter() i hide()

text = $(this).text().replace(/\s+/g, ' '); // Tę linijkę zapomniałem usunąć.

var earnings = $(this).children()[2].innerText;  // Tutaj $(this) odnosi się do elementów w $rows i zawiera poszczególne komórki, czyli 'imie', 'nazwisko' oraz 'zarobki'. Za pomocą $(this).children()[2] pobieramy element <td> 'zarobki'. Za pomocą innerText otrzymujemy wartość komórki.

if(!isNaN(earnings)) {	// Tutaj sprawdzamy, czy otrzymana wartość (earnings) jest liczbą. Robimy to z tego względu, gdyż pierwszy wiersz reprezentuje header tabeli i w interesującej nas komórce ma wartość 'zarobki' a nie wartość liczbową. 

return !(Number(earnings) <= Number(selectedRange)); // Warunek filtrowania. Jeżeli ustawimy suwak np. na 5000 to filtr powinien nam zwrócić elementy powyżej 5000, czyli te nie spełniające naszego kryterium zarobków do 5000.

}).hide(); // Ukrywamy pasujące/zwrócone elementy.