A
Anonymous

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

Prompt
Component Preview

About

Learn how to create interactive React components styled with Tailwind CSS, including real-time total calculations and checkbox functionalities for a seamless user experience.

Share

Last updated 1 month ago