(jquery) podliczanie zawartości input po zwolnieniu klawisza Opcje

[niebieszki]

Witam chciałbym napisać funkcję jquery ktora będzie wyliczac iloczyn 2 pól i wpisywała je do inputa wynik zaraz po wpisaniu 2 wartosci.

Poniżej przedstawiam obrazy i kod źródłowy:
(IMG:http://images38.fotosik.pl/615/053211c552122b7amed.png)

[HTML] pobierz, plaintext 
<table>
	<thead>
		<tr>
			<td>Liczba 1</td>
			<td>Liczba 2</td>
			<td>Wynik</td>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td><input name="liczba1[0]" id="liczba1[0]"></td>
			<td><input name="liczba2[0]" id="liczba2[0]"></td>
			<td><input name="wynik[0]" id="wynik[0]" disabled="disabled"></td>
		</tr>
		<tr>
			<td><input name="liczba1[1]" id="liczba1[1]"></td>
			<td><input name="liczba2[1]" id="liczba2[1]"></td>
			<td><input name="wynik[1]" id="wynik[1]" disabled="disabled"></td>
		</tr>
		.
		.
		.
		<tr>
			<td><input name="liczba1[n]" id="liczba1[n]"></td>
			<td><input name="liczba2[n]" id="liczba2[n]"></td>
			<td><input name="wynik[n]" id="wynik[n]" disabled="disabled"></td>
		</tr>
	</tbody>
[HTML] pobierz, plaintext 

[JAVASCRIPT] pobierz, plaintext 
$(document).ready(function() {
	$("input[name='liczba2[0]']").keyup(
			function()
			{
				var wynik = $("input[name='liczba1[0]']").val()*$("input[name='liczba2[0]']").val();
				$("input[name='wynik[0]']").val(wynik);
 
			});
});
[JAVASCRIPT] pobierz, plaintext 

powyższy kod działa dla pierwszego pola (co nie jest rzeczą dziwną)
liczba wierszy tabeli jest nieokreślona, co trzeba zastosować aby ta funkcja była bardziej uniwersalna? próbowałem z pętla for lecz niestety nie wyszło mi.
Czy zna ktoś jakieś rozwiązanie takiego problemu?

[ziolo.92]

Miałem na myśli takie rozwiązanie:

[JAVASCRIPT] pobierz, plaintext 
$(document).ready(function() {
	$("table input:not(:disabled)")
		.val(0)
		.bind('keyup', function(){
					var wynik = 1;
					var tr = $(this).parent().parent();
					tr.find('input:not(:disabled)')
						.each(function(){
							wynik*=$(this).val();
						});
					tr.find('input:disabled').val(wynik);
		});
});
[JAVASCRIPT] pobierz, plaintext 

Dzięki temu masz kod uniezależniony od ilości kolumn i ich kolejności.

Lub jeśli chcesz korzystać z pętli co w przypadku jquery będzie znacznie szybsze z powodu odnoszenia się bezpośrednio po id można zrobić tak:

[JAVASCRIPT] pobierz, plaintext 
$(document).ready(function() {
	var i=0;
	while(i <= $('table tr').length-2){
		$('#liczba1_'+i+', #liczba2_'+i)
			.val(0)
			.keyup(function(){
 
				var id = $(this).attr('id');
				id = id.substr(id.indexOf('_')+1, id.length-id.indexOf('_')-1);
 
				var wynik = $('#liczba1_'+id+'').val()*$('#liczba2_'+id).val();
				$('#wynik_'+id).val(wynik);
 
			});
		i++;
	}
});
[JAVASCRIPT] pobierz, plaintext 

Tyle, że to rozwiązanie ma jeden mankament, mianowicie nie można w id używać znaków '[', ']', dlatego zastąpiłem je jednym znakiem '_' przed liczbą.

Pozdrawiam

Ten post edytował ziolo.92 13.02.2011, 12:35:26