Utilizzo di jquery per ottenere totali per riga e totale totale della tabella

Question

Quindi la versione breve di questo è: Posso attraversare solo gli elementi all'interno dell'elemento corrispondente dei selettori prima dello each()? O c'è un modo più semplice per ottenere ciò che voglio senza un ciclo each()?

---

ho pensato che questo sarebbe molto più facile, che mi fa pensare che sto manca solo qualche principio fondamentale di elemento di movimento con jQuery.

Quindi, ecco lo scenario:

Ho una tabella (ed è opportuno in questo caso), in cui ogni cella ha un testo input. L'ultimo input è di sola lettura e si suppone che sia la somma totale degli altri valori immessi su quella riga. Ho uno script js davvero disordinato per trovare sia i totali di ogni riga che il totale generale di ogni riga totale.

Ecco il HTML di base:

<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> 

Il javascript validerà che i dati immessi sono numerici, tanto per essere chiari.

Quindi ho un listener di eventi per ogni input per onchange che aggiorna il totale quando l'utente immette i dati e passa alla cella/input successivo. Quindi ho una funzione chiamata updateTotal che attualmente utilizza i loop for per scorrere ciclicamente ciascuna riga e all'interno di quel ciclo, ogni cella e infine imposta l'input nella cella totale per sommare.

Nota rapida: ho incluso il codice qui sotto per mostrare che non sto solo cercando una mano e per dimostrare la logica di base di ciò che ho in mente. Sentitevi liberi di sfiorare o saltare questa parte. Funziona e non ha bisogno di debug o critiche.

Questo è ciò che sembra:

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

Ora sto cercando di riscrivere quanto sopra con la sintassi jQuery, ma mi sto bloccato. Ho pensato che il modo migliore per andare sarebbe quella di utilizzare each() loop lungo le linee di:

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

} 

ma utilizzando $(this) non sembra lavorare nel modo in cui ho pensato. Ho letto e visto che l'uso di $(this) in ciascun loop punta a ciascun elemento abbinato, che è quello che mi aspettavo, ma non capisco come attraversare quell'elemento nella funzione each(). Quanto sopra lascia anche il bit grand_total, perché stavo avendo ancora meno fortuna nel far funzionare la variabile totale generale. Ho provato la seguente solo per ottenere i row_totals:

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

con un certo successo, ma poi è riuscito a rompere quando ho provato ad aggiungere ad esso. Non penserei che avrei bisogno di ogni riga per avere un ID per fare questo lavoro, dal momento che ogni parte dovrebbe puntare alla riga che ho in mente.

---

Così la versione breve di questo è: Posso usare l'ogni ciclo di attraversare solo gli elementi all'interno delle partite, e se sì, qual è la sintassi corretta? O c'è un modo più semplice per ottenere quello che voglio senza un ciclo?

Oh, un ultimo pensiero ...

E 'possibile ottenere la somma numerica (al contrario di una stringa lunga) di tutti gli elementi abbinati con jquery? Lo cercherò di più da solo, ma se qualcuno lo sapesse, sarebbe molto più semplice.

Answer 1

Si sta tentando di impostare il contesto in modo errato provare questo:

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

} 

Per ulteriori informazioni sul contesto controllare la documentazione jQuery: http://docs.jquery.com/Core/jQuery#expressioncontext

Answer 2

Non ci possono essere due parametri per un selettore. Il secondo parametro è il contesto in cui deve avvenire la ricerca. Prova qualcosa come la seguente: $ ('# tableID tbody tr) .each (function() { // ora questa è una riga della tabella, quindi solo cerca tutte le caselle di testo in quella riga, possibilmente con una classe css chiamata sum o con qualche altro attributo $ ('input [type = text]', this) .each (function() { // seleziona tutti i textbosx nella riga . $ (this) .val() ottiene il valore di textbox, ecc. }); // ora al di fuori di questa funzione avresti il ​​totale // aggiungi a un campo nascosto o una variabile globale per ottenere i totali delle righe, ecc. });