Un saluto a tutti gli amici del forum,
avrei bisogno del vostro supporto per poter avere la possibilità di spostare dinamicamente tenendo premuto il sinistro del mouse verso l'alto o verso il basso delle righe attualmente statiche.
Cerco di spiegarmi meglio portando come esempio proprio il mio codice:
Attualmente quando creo una commessa di lavoro utilizzo come codice html questo:
codice:
<table id="commessa">
<tbody>
<tr>
<td>Intervento</td>
<td>Fornitore</td>
<td>Q.tà</td>
<td>Unitario</td>
<td>Sconto %</td>
<td>Totale</td>
<td>Aggiungi</td>
</tr>
<tr class="righe">
<td><input type="text" name="itr1" id="itr1" class="t1" size="30" placeholder="Max 49 caratteri" maxlength="49" required ></td>
<td><input type="text" name="for1" id="for1" class="t1" size="10"></td>
<td><input type="text" name="q1" class="t2 somma" onKeyUp="SommaRiga(1)" id="q1" size="3" value="0.0" placeholder="0" required></td>
<td><input type="text" name="iu1" class="t2 somma" onKeyUp="SommaRiga(1)" onBlur="Format(1)" id="iu1" size="6" value="0.0" placeholder="0.00" autocomplete="off"></td>
<td><input type="text" name="sc1" class="t2 somma" onKeyUp="Virgola(1)" id="sc1" size="8" value="0.0" placeholder="sconto" autocomplete="off"></td>
<td><input type="text" name="imp_1" id="imp_1" class="t2 somma" size="8" value="0.0" placeholder="0.00" readonly></td>
<td><img src="images/add.png" name="add1" width="16" height="16" id="add1" class="add"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td>Tot. Gen.</td>
<td><input type="text" name="totale" class="t2" id="totale" size="7" value="" placeholder="0.00" readonly></td>
</tr>
</tbody>
</table>
mentre come codice javascript questo:
codice:
<!-- SCRIPT ANDREA CAVICCHI HTML.IT -->
<script type="text/javascript">
$(document).ready(function(){
var regex = /^(.*)(\d)+$/i;
var cindex = 1;
$('body').on('click', '.add', function() {
cindex++;
if(cindex<=15){
var newRow = '<tr class="righe"><td><input type="text" name="itr'+cindex+'" id="itr'+cindex+'" class="t1" size="30" placeholder="Max 49 caratteri" maxlength="49"></td><td><input type="text" name="for'+cindex+'" id="for'+cindex+'" class="t1" size="10"></td><td><input type="text" name="q'+cindex+'" class="t2 somma" id="q'+cindex+'" size="3" value="0.0" onkeyup="SommaRiga('+cindex+')" placeholder="0"></td><td><input type="text" name="iu'+cindex+'" class="t2 somma" onBlur="Format('+cindex+')" onkeyup="SommaRiga('+cindex+')" id="iu'+cindex+'" size="6" value="0.00" placeholder="0.00"></td><td><input type="text" name="sc'+cindex+'" class="t2 somma" onkeyup="Virgola('+cindex+')" id="sc'+cindex+'" size="8" value="0.0" placeholder="sconto"></td><td><input type="text" name="imp_'+cindex+'" id="imp_'+cindex+'" class="t2 somma" size="8" value="0.0" placeholder="0.00" readonly></td><td><img src="images/add.png" name="add1" width="16" height="16" id="add'+cindex+'" class="add"></td></tr>'
$("#commessa tbody tr").eq((cindex-1)).after(newRow)
}else{
alert('Non puoi inserire più di 15 righe');
return false;
}
$('.add').not(':last').addClass( 'addisable' ).removeClass( 'add' )
}).on('focus','.somma', function(){
$(this).not('input[name^="imp_"]').val('')
})
});
function Format(ele){
var valore = ($("#iu"+ele).val()*1)
$("#iu"+ele).val(valore.toFixed(2))
}
function Virgola(nele){
var cambia = $("#sc"+nele).val().replace(/\,/g,'.')
$("#sc"+nele).val(cambia)
SommaRiga(nele)
}
function SommaRiga(num){
var tot = 0
var qt = $("#q"+num).val()
var unitario = $("#iu"+num).val()
var sc = $("#sc"+num).val()
var Tot = (qt*1*unitario*1)
var impsc = (Tot/100*sc)
var somma = (Tot-impsc)
if(somma>0){
$("#imp_"+num).val(somma.toFixed(2))
}else{
$("#imp_"+num).val('')
$("#iu"+num).val('')
}
var elem = $('input[name^="imp_"]')
for(i=0; i<elem.length;i++) {
tot += (elem.eq(i).val()*1)
};
$("#totale").val(tot.toFixed(2))
//alert(num)
}
</script>
Come risultato ottengo all'apertura della commessa, una sola riga con accanto il tasto "+" per aggiungerne altre e fin qui tutto ok.
Il problema nasce quando inavvertitamente viene compilata una riga con tutti i dati, descrizione, fornitore, q.tà unitaria , prezzo, ecc. per poi successivamente rendermi conto che la riga andava messa prima o dopo, non avendo possibilità di spostarla dinamicamente, mi tocca cancellare tutta la riga e riscriverla daccapo.
Ho visto che molte pagine web, dopo la compilazione delle righe, danno la possibilità, tenendo premuto il pulsante sinistro del mouse, di ordinarle portandole sopra o sotto.
Mi potreste per favore dare una mano, inutile dire (perchè si comprende anche dal codice scritto), che non sono un professionista programmatore ma una persona fortemente appassionata.
Grazie anticipatamente