Używanie jquery do uzyskania sumy wierszy i sumy całkowitej tabeli

Question

Krótka wersja tego: Czy mogę przejść tylko elementy w dopasowanym elemencie selektorów przed each()? Czy istnieje prostszy sposób na uzyskanie tego, czego chcę, bez pętli each()?

---

myślałem, że to byłoby znacznie łatwiejsze, co sprawia, że ​​myślę Ja tylko brakuje trochę podstawową zasadę elementu przechodzącego z jQuery.

Więc oto scenariusz:

Mam tabeli (i to jest właściwe w tym przypadku), gdzie każda komórka zawiera tekst input. Ostatnie wejście jest tylko do odczytu i ma być całkowitą sumą innych wartości wprowadzonych w tym wierszu. Mam naprawdę niechlujny skrypt js do znajdowania zarówno sumy każdego wiersza, jak i sumy całkowitej każdego wiersza.

Oto podstawowe HTML:

<table> 
<thead> 
<tr><th>Col 1</th><th>Col 2</th><th>Col 3</th><th>Total</th></tr> 
</thead> 
<tbody> 
<tr id="row1"><td><input type="text" /></td><td><input type="text" /></td><td><input type="text" /></td><td class="total"><input type="text" readonly="readonly" /></td></tr> 
<tr id="row2"><td><input type="text" /></td><td><input type="text" /></td><td><input type="text" /></td><td class="total"><input type="text" readonly="readonly" /></td></tr> 
<tr id="row3"><td><input type="text" /></td><td><input type="text" /></td><td><input type="text" /></td><td class="total"><input type="text" readonly="readonly" /></td></tr> 
</tbody> 
</table> 

javascript potwierdzi, że wprowadzone dane są numeryczne, żeby była jasność.

Mam więc detektor zdarzeń dla każdego wejścia dla onchange, który aktualizuje sumę, gdy użytkownik wprowadza dane i przenosi się do następnej komórki/wejścia. Następnie mam funkcję o nazwie updateTotal, która obecnie wykorzystuje pętle for do przechodzenia przez każdy wiersz i wewnątrz tej pętli, każdą komórkę, a na koniec ustawia dane wejściowe w sumie komórki do sumy.

Szybka uwaga: Załączam poniższy kod, aby pokazać, że nie szukam tylko ręki i wykazać podstawową logikę tego, co mam na myśli. Zachęcamy do przejrzenia lub pominięcia tej części. Działa i nie wymaga debugowania ani krytyki.

Jest to co to wygląda:

function updateTotal() { 
    table = document.getElementsByTagName("tbody")[0]; 
    allrows = table.getElementsByTagName("tr"); 
    grandtotal = document.getElementById("grand"); 
    grandtotal.value = ""; 

    for (i = 0; i < allrows.length; i++) { 
     row_cells = allrows[i].getElementsByTagName("input"); 
     row_total = allrows[i].getElementsByTagName("input")[allrows.length - 2]; 
     row_total.value = ""; 

     for (ii = 0; ii < row_cells.length - 1; ii++) { 
      row_total.value = Number(row_total.value) + Number(row_cells[i][ii].value); 
      grandtotal.value = Number(grandtotal.value) + Number(row_cells[i][ii].value); 
     } 
    } 
} 

Teraz próbuję ponownie napisać powyższe składni jQuery, ale ja utknęłam uzyskiwanie. Myślałem, że najlepszym sposobem byłoby wykorzystanie each() pętle wzdłuż linii:

function findTotals() { 
$("tbody tr").each(function() { 
    row_total = 0; 
    $($(this) + " td:not(.total) input:text").each(function() { 
     row_total += Number($(this).val()); 
     }); 
    $($(this) + " .total :input:text").val(row_total); 
}); 

} 

ale stosując $(this) nie wydają się działać w sposób, pomyślałem. Przeczytałem i zobaczyłem, że użycie $(this) w każdej pętli wskazuje na każdy dopasowany element, co jest tym, czego się spodziewałem, ale nie rozumiem, w jaki sposób mogę przejść przez ten element w funkcji each(). Powyższe również pomija trochę grand_total, ponieważ miałem jeszcze mniej szczęścia, aby uzyskać całkowitą zmienną całkowitą do działania. Próbowałem następujących po prostu, aby uzyskać row_totals:

$($(this).attr("id") + " td:not(.total) input:text").each(function() { 

z pewnym sukcesem, ale potem udało się go złamać, gdy próbowałem dodając do niego. Nie sądzę, żebym potrzebował każdego wiersza, aby mieć id, aby to działało, ponieważ każda część powinna wskazywać na wiersz, który mam na myśli.

---

Więc krótka wersja to: Czy mogę używać każdej pętli przechodzić tylko elementy w obrębie meczów, a jeśli tak, to jaka jest poprawna składnia? Czy istnieje prostszy sposób na uzyskanie tego, czego chcę, bez każdej pętli?

Och, ostatnia myśl ...

Czy można uzyskać sumę liczbową (w przeciwieństwie do jednego długiego ciągu) wszystkich dopasowanych elementów z jquery? Sam będę to badał, ale jeśli ktokolwiek wie, ułatwi to trochę.

Answer 1

Próbujesz ustawić kontekst nieprawidłowo spróbuj tego:

function findTotals() { 
    $("tbody tr").each(function() { 
     row_total = 0; 
     $("td:not(.total) input:text",this).each(function() { 
      row_total += Number($(this).val()); 
     }); 
     $(".total :input:text",this).val(row_total); 
    }); 

} 

Aby uzyskać więcej informacji na temat kontekstu sprawdzeniu docs jquery: http://docs.jquery.com/Core/jQuery#expressioncontext

Answer 2

Możliwe są dwa parametry dla selektora. Drugi parametr to kontekst, w którym ma się odbyć wyszukiwanie. Spróbuj czegoś takiego: $ ('# tableID tbody tr) .each (function() { // teraz jest to wiersz tabeli, więc po prostu wyszukaj wszystkie pola tekstowe w tym wierszu, ewentualnie z klasą css zwaną sumą lub innym atrybutem $ ("input [type = text]", this) .each (function() { // wybiera wszystkie textbosxes w rzędzie $ (this) .val() dostaje wartość textbox, itp. }); // teraz poza tą funkcją masz całkowitą // dodać ją do ukrytego pola lub zmiennej globalnej, aby uzyskać sumy wierszy, itp. . });