React Component with Tailwind CSS
<script> function toggleDescriptionInput(select, anagraficaDesc, listinoDesc) { const input = select.nextElementSibling; if (select.value === 'manuale') { input.value = ''; input.readOnly = false; } else if (select.value === 'anagrafica') { input.value = anagraficaDesc; input.readOnly = true; } else if (select.value === 'listino') { input.value = listinoDesc; input.readOnly = true; } } function toggleCostoInput(select, costoInterno, costoEsterno) { const input = select.nextElementSibling; if (select.value === 'interno') { input.value = costoInterno; } else if (select.value === 'esterno') { input.value = costoEsterno; } else { input.value = ''; } updateTotals(); } function toggleRisorseInputs(select) { const row = select.closest('tr'); const costoInput = row.querySelector('td:nth child(16) input'); const giorniInput = row.querySelector('td:nth child(17) input'); if (select.value === 'interna') { costoInput.disabled = true; costoInput.classList.add('disabled'); giorniInput.disabled = false; giorniInput.classList.remove('disabled'); } else if (select.value === 'esterna') { costoInput.disabled = false; costoInput.classList.remove('disabled'); giorniInput.disabled = true; giorniInput.classList.add('disabled'); } else { costoInput.disabled = true; costoInput.classList.add('disabled'); giorniInput.disabled = true; giorniInput.classList.add('disabled'); } updateTotals(); } function togglePrintIcon(icon) { icon.classList.toggle('selected'); } function updateTotals() { let totaleParziale = 0; const rows = document.querySelectorAll('tbody tr'); rows.forEach(row => { const prezzoAnagrafica = parseFloat(row.querySelector('td:nth child(4) input').value) || 0; const prezzoListino = parseFloat(row.querySelector('td:nth child(5) input').value) || 0; const prezzoManuale = parseFloat(row.querySelector('td:nth child(6) input').value) || 0; const quantita = parseFloat(row.querySelector('td:nth child(7) input').value) || 0; const pmValue = parseFloat(row.querySelector('td:nth child(9) input').value) || 0; const scontoValue = parseFloat(row.querySelector('td:nth child(11) input').value) || 0; let prezzoSelezionato = prezzoAnagrafica || prezzoListino || prezzoManuale; let subtotal = prezzoSelezionato * quantita; subtotal += subtotal * (pmValue / 100); subtotal = subtotal * (scontoValue / 100); totaleParziale += subtotal; const parzialeInput = row.querySelector('td:nth child(10) input'); const totaleInput = row.querySelector('td:nth child(12) input'); parzialeInput.value = subtotal.toFixed(2); totaleInput.value = subtotal.toFixed(2); // Calcolo Utile e Margine const costoInput = row.querySelector('td:nth child(3) input[type="number"]'); const costo = parseFloat(costoInput.value) || 0; const utile = subtotal (costo * quantita); const margine = costo !== 0 ? (utile / subtotal) * 100 : 0; row.querySelector('td:nth child(18) input').value = utile.toFixed(2); row.querySelector('td:nth child(19) input').value = margine.toFixed(2); }); const iva = totaleParziale * 0.22; const totaleIvato = totaleParziale + iva; document.getElementById('totaleParziale').textContent = totaleParziale.toFixed(2); document.getElementById('totale').textContent = totaleParziale.toFixed(2); document.getElementById('iva').textContent = iva.toFixed(2); document.getElementById('totaleIvato').textContent = totaleIvato.toFixed(2); } // Inizializza i totali al caricamento della pagina updateTotals(); // Aggiungi event listener per aggiornare i totali quando vengono modificati i valori document.querySelectorAll('input, select').forEach(element => { element.addEventListener('change', updateTotals); }); </script> devo aggiungere una fuznione che mi calcoli il totale dopo aver selezionato il chck box
