[Javascript] Disabilitare campo input quando si aggiunge riga nuova

elpirata

Utente Attivo
18 Mar 2009
264
7
18
Ciao a tutti,
avrei bisogno del vostro supporto per risolvere un problema che ho con un tabella che genera grazie a javascript righe nuove al clic su un icona:

in sostanza ho questa tabella:
HTML:
<table id="commessa">
<tbody>

<tr>
<td><b>Intervento</b></td>
<td><b>Fornitore</b></td>
<td><b>Q.t&agrave;</b></td>
<td><b>Unitario</b></td>
<td><b>Sconto %</b></td>
<td><b>Totale</b></td>
<td><b>Aggiungi</b></td>
</tr>

<tr class="righe">
<td><input type="text" name="itr1" id="itr1" class="t1" required="required" size="30" placeholder="Max 49 caratteri" maxlength="49" ></td>
<td><input type="text" name="for1" id="for1" class="t1" size="10"></td>
<td><input type="text" name="q1" required="required" class="t2 somma" onKeyUp="SommaRiga(1)" id="q1" size="3" value="0.0" placeholder="0"></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"></td>
<td><input type="text" name="sc1" class="t2 somma" onKeyUp="Virgola(1)" id="sc1" size="8" value="0.0" placeholder="sconto"></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. Generale</td>
<td><input type="text" name="totale" class="t2" id="totale" size="7" value="" placeholder="0.00" readonly></td>
</tr>

</tbody>
</table>

questo è invece il codice javascript che permette la creazione di nuove righe:

PHP:
$(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>

<style type="text/css">
.add{cursor:pointer;}
.addisable{opacity:0.5;}
.remove{cursor:pointer; visibility:visible;}
.removedisable{visibility:hidden;}
.uppercase{border:#999 1px solid;}
#totale{font-weight: bold;border: 1px groove #900;}
</style>

vorrei poter modificare lo script facendo in modo che non appena l'utente inserisce una nuova riga, i campi di quella precedente vengano posti in uno stato di readonly e vorrei aggiungere accanto all'icona

HTML:
<td><img src="images/add.png" name="add1" width="16" height="16" id="add1" class="add"></td>

un'altra icona che permetta, qual'ora l'utente necessiti di modificare le righe precedenti, di abilitarne l'edit

Spero possiate darmi una mano

Grazie
 
Discussioni simili
Autore Titolo Forum Risposte Data
bianca_dimulescu [Javascript] Disabilitare due bottoni di submit in base al radiobutton selezionato Javascript 1
L countdown multiplo javascript Javascript 1
S Problemi Javascript + Aruba Javascript 2
M Inviare un file su un server remoto con JavaScript Javascript 0
T a href="javascript:;" Javascript 0
F Creare elementi html con javascript Javascript 4
A pulsante di update campo mysql con javascript Javascript 2
8 Javascript - PDF Form Javascript 0
B javascript per problemi con pdf e Safari Javascript 0
N informazione javascript Programmazione 0
I Eecuzione di javascript in ciclo foreach php. PHP 7
P javascript:document.forms Javascript 7
S Consiglio esercizio Javascript Javascript 2
MarcoGrazia Aggiungere o rimuovere classi in javascript Javascript 1
P Passaggio id php a javascript PHP 6
E lettura da un Database con Javascript jQuery 2
V TRIS in javascript Javascript 1
IClaude Funzione Javascript Javascript 8
Alex_70 Javascript date color Javascript 3
F Convertire JavaScript per la compatibilità nei browser obsoleti Javascript 0
I Passare dei parametri in javascript PHP 0
Shyson Meglio Javascript o HTML? Javascript 4
M Chiamare pagina php da javascript Javascript 8
M Errore JavaScript per php [objeto HTMLParagraphElement] PHP 0
D Javascript per il download dei dati Javascript 0
grgfede Problema javascript con aruba Javascript 1
webmachine [PHP] [JAVASCRIPT] Form strano in HTML PHP PHP 1
W Modificare il Type di un Input box in javascript ovunque si trovi Javascript 0
I javascript come caricare una pagina sopra quella corrente in automatico Javascript 2
L [Javascript] Problema salvataggio dati in db Javascript 1
max1974 [Javascript] Grafico chartjs con dati da J.ajax Javascript 3
G Quiz Javascript Javascript 4
A [Javascript] Scrittura su più campi contemporaneamente Javascript 19
F classic asp popolare combo box javascript Presentati al Forum 1
claudio_lorenzo [Javascript] aiuto su jquery per calcolo altezze dom Javascript 1
F [Javascript] comando innerHTML non funziona Javascript 5
alexice51 proggrammi per scrivere in javascript? Javascript 3
max1974 [Javascript] Accordion aria-exspanded Javascript 0
D [Javascript] salvare immagine canvas - paypal Javascript 0
O [Javascript] Conflitto Jquery: forse... Javascript 0
M [Javascript] Canvas js css Javascript 1
M Programmazione web HTML, CSS e JavaScript Offerte e Richieste di Lavoro e/o Collaborazione 6
G [Javascript] Errore inserimento dati Backend Node.js e workbench Javascript 1
A Creare con Javascript un percorso all'interno di uno spazio Javascript 0
D [Javascript] inserire uno script in un file php Javascript 6
Monital [Javascript] inserire dati estratti dal db in html fisso Javascript 1
K [javascript] Tecnica per rilevare celle contenenti caratteri ricevute in dinamico Javascript 1
F [JavaScript] Ottenere il CSS dopo transform: scale() e transform-origin Javascript 0
S [Javascript] Problema costrutto if Javascript 0
I [Javascript] window.location.href porta alla nuova pagina e ritorna incomprensibilmente. Javascript 0

Discussioni simili