Calcolo della sum di numeri nel testo ContentEditable usando Jquery

Bene, ecco la configurazione: ho una tabella in una “forma” di cui sto modificando i contenuti utilizzando l’attributo HTML ContentEditable (impostato sull’elemento padre della tabella). Ci sono quattro colonne tutte insieme: due serie di colonne “descrizione articolo” e due serie di colonne “prezzo” corrispondenti, insieme a un’area in basso dove vorrei che fosse visualizzato il prezzo totale.

Il problema numero 1 è che non sono sicuro di come calcolare la sum dei numeri tra le celle quando non sto lavorando con input e campi. Complicare le cose (almeno per me) è che sto aggiungendo le righe alla tabella dynamicmente con Jquery.

Il problema n. 2 è che la seconda serie di colonne descrizione / prezzo è facoltativa. Vorrei poter utilizzare un pulsante “Aggiungi” per triggersre singoli elementi in quelle colonne da aggiungere al totale.

Modifica: ho provato alcune cose casuali e ho avuto un certo successo memorizzando i valori delle celle in una matrice, quindi dicendo a Jquery di aggiungere il contenuto di quella matrice e di produrre la sum. Il problema ora è che non mi sta dando una sum, mi sta dando i contenuti dell’array senza spazi bianchi. Ad esempio, se l’array contiene 1,2,3, mi dà 123 anziché 6.

Edit # 2: Dopo aver messo insieme pezzi di una mezza dozzina di tutorial, ho qualcosa che funziona per Problema # 1. Passiamo al problema n. 2!

var sumArray = [] $('#calc').click(function(){ $('table tbody tr').each(function() { sumArray.push($(this).find('.cost').text().match(/\d+/)); }); var total = 0; for (var i = 0; i < sumArray.length; i++) { total += parseInt(sumArray[i]); } $('.totalcost').text(total); }); 

Ecco il codice della tabella:

 
Service Cost Complementary (Optional) Service Cost
Total
Add Remove Reset No Comps Calculate Total

Ed ecco il JS che sto usando in questo momento.

 //Add fields to table var i = $('tbody>tr').size() + 1; $('#add').click(function() { if ($("tbody tr:first-child td").length > 2) { $('').fadeIn('slow').appendTo('tbody'); i++; } else {$('').fadeIn('slow').appendTo('tbody'); i++; }; }); $('#remove').click(function() { if(i > 1) { $('tbody>tr:last').remove(); i--; } }); $('#reset').click(function() { while(i > 2) { $('tbody>tr:last').remove(); i--; } }); $('#nocomp').click(function(){ if ($("tbody tr td").length > 2) { $('thead tr th:nth-child(2),thead tr th:nth-child(3),tbody>tr td:nth-child(2),tbody>tr td:nth-child(3)').remove(); } }); /*$('#calc').click(function(){ $('table tbody tr').each(function() { $(this).find('.totalcost').text( parseFloat($(this).find('.cost').text()) ); }); });*/ $('#calc').click(function(){ $(this).find('table tbody tr td.cost').each(function(idx) { var total = $(this).text(); count += total; }); alert(parseInt(count)); }); 

Dai un’occhiata a questo jsFiddle, potrebbe essere quello che vuoi: http://jsfiddle.net/mPvyA/3/

Ho modificato leggermente i pulsanti per aggiungere / rimuovere una class inclusa, quindi controllare per calcolare:

  $('#exccomp').click(function(){ $('table').find('.compcost').removeClass('included'); }); $('#inccomp').click(function(){ $('table').find('.compcost').addClass('included'); }); $('#calc').click(function(){ var sumArray = []; $('table tbody tr').each(function() { var $this = $(this), includedCompCost = $this.find('.compcost').filter('.included').text().match(/\d+/); sumArray.push($this.find('.cost').text().match(/\d+/)); if (includedCompCost !== "") { sumArray.push(includedCompCost); } }); var total = 0; for (var i = 0; i < sumArray.length; i++) { var parsedInt = parseInt(sumArray[i]); if (!isNaN(parsedInt) && parsedInt > 0) { total += parsedInt; } } $('.totalcost').text(total); });​ 

Usa parseInt (sui singoli pezzi che stai aggiungendo, non solo il risultato) per convertire una stringa in un numero, altrimenti + li concatenerà invece di aggiungerli.