Riga clonata?...non proprio

**ale_70** · 13-09-2013, 11:54

Salve a tutti, sto realizzando un semplice registro chiavi, la tabella è formata da 5 colonne: 3 contengono tag select le cui option sono collegate ad un db mysql, le altre 2 sono campi (input) nei quali andrà inserita la data di rilascio e la data di riconsegna.
Nei select ho aggiunto l'attributo 'onchange' che mi richiama le funzioni 'data_rilascio()' e 'data_riconsegna()' che in automatico inseriscono data e ora. Per finire un tasto mi richiama la funzione 'clona_riga()'. Tutto gira ma le righe clonate non hanno le funzionalità della riga "madre" cioè si dissociano dalle funzioni JS e inspiegabilmente anche la prima riga (quella da cui tutto parte) si dissocia, vorrei inoltre che i campi input fossero vuoti.
So che dovrei settare gli attributi delle righe clonate ho cercato un po' nel web ma non si muove foglia e sono ad un punto morto.
Scusate, come avrete capito sono alle primissime armi, magari mi sto incastrando in una sciocchezza c'è qualche anima pia che mi sa dare una mano??

codice:

<script type="text/javascript">
        function data_rilascio() {

//acquisisco i valori tramite i metodi get fino a formare la variabile data//
        
var data= gg+"/"+mm+"/"+aa;

//la stessa cosa per l'orario//

var orario=ora+":"+min;

//infine inserisco le variabili dentro il campo input//

document.chiavi.datau.value=data+'  -  '+orario;
}

function data_riconsegna() {  // stessa procedura, cambia solo l'elemento input di riferimento in 'datae'//}

function clona_riga() {
    var n=0;
    var riga=document.getElementById("dati");
    var newRiga=riga.cloneNode(true);
    n++;
    newRiga.setAttribute("id","dati"+n);
    newRiga.childNodes[1].nodeValue=null;
    newRiga.childNodes[3].nodeValue=null;
    riga.parentNode.appendChild(newRiga);
    }  
</script>

**cavicchiandrea** · 13-09-2013, 13:25

Ciao e benvenuto, vedi se questa discussione può esserti utile (chiaramente riadattandola alle tue esigenze)

**ale_70** · 13-09-2013, 15:48

Ciao, grazie per l'interessamento.
Sicuramente il principio di base è proprio quello esposto nel link, anche se è ridotto proprio all'osso rispetto alla struttura della mia tabella dove all'interno del TR di partenza sono inserite, tra l'altro, due select collegate ad un db mysql. Eccola qui:

codice:

<body><center>
<form name="reg_chiavi" id="reg_chiavi" method="POST" >
<table border="3" width="80%">
<thead><tr><td colspan="5">
<p align="center"><font size="5" face="Verdana" color="#0000FF">REGISTRO&nbsp CHIAVI</font></p></td></tr>
<tr><td><p align="center" /><font size="3" face="Verdana" color="#FF0000">Chiave</font></td><td><p align="center" /><font size="3" face="Verdana" color="#FF0000">Data di rilascio</font></td>
    <td><p align="center" /><font size="3" face="Verdana" color="#FF0000">Utente</font></td><td><p align="center" /><font size="3" face="Verdana" color="#FF0000">Data di riconsegna</font></td>
    <td><p align="center" /><font size="3" face="Verdana" color="#FF0000">Operatore</font></td></tr></thead>
<tbody><tr id="dati"><td><center> // queste due select identificano la chiave e si trovano nel primo <td>//
<select size="1" name="edificio" id="edificio">
 <option value="">ED.</option>
// <option value.......</option></select>//
<select size="1" name="stanza" id="stanza">
  <option value="">N.</option>
// <option value.......</option></select></center></td>//
<td><center><input type="text" name="datau" id="datau"/> // campo dove apparirà la data di rilascio chiave //
</center></td><td><center><select name="utente" id="utente" onchange="return data_rilascio()"> // la select collegata a mysql degli utenti //
 <option selected="NULL"> Cognome / Nome </option>
 <?php
 while ($r=mysql_fetch_array($risultato)) {$c=ucwords($r['cognome']); $n=ucwords($r['nome']);
 print "<option value='$c,$n'>$c &nbsp $n</option>\n";} ?>
</select></center></td><td><center><input type="text" name="datae" id="datae"/> // campo dove apparirà la data di riconsegna chiave //

</center></td><td><center><select name="operatore" id="operatore" onchange="return data_riconsegna()"> // la select collegata a mysql degli operatori //

 <option selected="NULL"> NON RESTITUITA </option>
 <?php
 while ($riga=mysql_fetch_array($result)) {$op=ucwords($riga['nominativo']); 
 print "<option value='$op'>$op</option>\n";} ?>
</select></center></td></tr></tbody>
</table></form></center>

<input type="button" name="aggiungi" value="Aggiungi riga" onclick="return clona_riga()"/>
      

</body>

Trovandomi alle prime armi non mi riesce facile settare correttamente gli attributi dei vari TD. E dio solo sa se non ci ho provato!

Grazie per ogni eventuale apporto.

**Xinod** · 13-09-2013, 21:55

un mio script vecchissimo
http://www.xinod.it/scripts/elements_cloning/index.php
vedi se ti ci ritrovi

chiaramente le tue funzioni devono diventare un po' piu' elastiche, prevedendo di passare come argomento almeno l' id dell' input in cui andare a scrivere (vedi alert nell' esempio)

ciao

**ale_70** · 14-09-2013, 10:19

grazie Xinod, devo confessarti che avevo gia letto il tuo script tentando di personalizzarlo ma, come vedi, senza successo. Nel frattempo non mi sono abbattuto e mettendo insieme un po' di appunti in giro per il web e rielaborando alla mia dilettantistica maniera ho realizzato quanto segue:

codice:

function clona_riga() {
var tb=document.getElementById('tabella').getElementsByTagName('tbody')[0]; //rif al tbody 
var counter = tb.getElementsByTagName('tr').length;
var basetr = document.getElementById('dati');
var newtr = basetr.cloneNode(true);
for (var c=0;c<counter;c++)
newtr.setAttribute('id','dati'+c);// la nuova riga acquisisce il nuovo id 
var tdArr = newtr.getElementsByTagName('td'); // prendo array TD della nuova riga e setto i vari attributi

tdArr[0].getElementsByTagName('select')[0].setAttribute('id','edificio'+c);
tdArr[0].getElementsByTagName('select')[0].setAttribute('name','edificio'+c);
tdArr[0].getElementsByTagName('select')[1].setAttribute('id','stanza'+c);
tdArr[0].getElementsByTagName('select')[1].setAttribute('name','stanza'+c);
tdArr[1].getElementsByTagName('input')[0].setAttribute('id','datau'+c);
tdArr[1].getElementsByTagName('input')[0].setAttribute('name','datau'+c);
tdArr[2].getElementsByTagName('select')[0].setAttribute('id','utente'+c);
tdArr[2].getElementsByTagName('select')[0].setAttribute('name','utente'+c);
tdArr[2].getElementsByTagName('select')[0].onchange=function(){data_rilascio('datau'+c);} // setto l'attributo onchange nel TD corrispondente alla select
tdArr[3].getElementsByTagName('input')[0].setAttribute('id','datae'+c);
tdArr[3].getElementsByTagName('input')[0].setAttribute('name','datae'+c);
tdArr[4].getElementsByTagName('select')[0].setAttribute('id','utente'+c);
tdArr[4].getElementsByTagName('select')[0].setAttribute('name','utente'+c);
tdArr[4].getElementsByTagName('select')[0].onchange=function(){data_riconsegna('datae'+c);}
}
  for(var i=0; i<tdArr.length; i++){ //creo un loop utile per svuotare i campi input
    if(i==1){ 
      newtr.getElementsByTagName('td')[1].value=''; 
    } 
    else if(i==3){ 
        newtr.getElementsByTagName('td')[3].value = ''; 
      } 
    } 
 document.getElementById('tabella').getElementsByTagName('tbody')[0].appendChild(newtr); 
}

Ho cercato di costruire questa funzione seguendo una certa logica ma evidentemente le mie lacune tecniche sono ancora troppo grandi.
Ho seguito anche il tuo consiglio sul passare alle funzioni l'id degli input nel quale dovranno scrivere.
Non riesco a capire cos'è che non va, ad esempio lo strumento di sviluppo nel browser IE mi dice che newtr è indefinito...BAH! Sono ad un vicolo cieco. Cos'altro posso fare??
Grazie, ciao.

**cavicchiandrea** · 14-09-2013, 10:49

Studiare il javascript o attendere che qualcuno ti realizzi lo script

d'altronde se non riesci a modifica gli script funzionanti c'è poco da fare

**ale_70** · 14-09-2013, 11:30

Scusa ma mi sarei aspettato un commento sullo script inviatovi, che devo studiare lo sapevo già, d'altronde chi può permettersi di smettere di farlo, ne mi sembra di aver dimostrato di attendere passivamente una soluzione. Sto continuando a lavorarci e speravo di farlo in parallelo con voi, se ho travisato l'intento di questo forum chiedo venia!

**cavicchiandrea** · 14-09-2013, 11:55

Originariamente inviato da ale_70
Scusa ma mi sarei aspettato un commento sullo script inviatovi,

Per questo bisognerebbe entrare più nel dettaglio del progetto cosa difficile da gestire su un forum.

che devo studiare lo sapevo già, d'altronde chi può permettersi di smettere di farlo, ne mi sembra di aver dimostrato di attendere passivamente una soluzione.

Mai detto questo, d'altronde ale più di darti degli esempi funzionanti non saprei cos'altro fare (non conoscendo il progetto e le problematiche)

Sto continuando a lavorarci e speravo di farlo in parallelo con voi,

Da parte mia lo ritengo molto improbabile

se ho travisato l'intento di questo forum chiedo venia!

I forum possono darti un traccia, un esempio, un consiglio, una indicazione, non lavorare in sinergia (mia opinione personale)

**Xinod** · 14-09-2013, 12:51

a confrontare con l' html che hai postato
- manca id="tabella"
- hai un td iniziale in piu' che sballa il conto, pensando sia un commento, ma di fatto riapri un td!
<td><center> // queste due select identificano la chiave e si trovano nel primo <td>//
- qui (e a seguire) manca un riferimento corretto al campo di cui vuoi settare il value
newtr.getElementsByTagName('td')[1].value='';

ciao

**ale_70** · 14-09-2013, 13:38

grazie Xinod, provo a cambiare i riferimenti per settare il value da ('td').... a ('input')....mi interessava anche sapere se la sintassi per settare i vari attributi era giusta soprattutto quella relativa agli 'onchange'. Ci deve essere qualcosa che non va perché sta benedetta riga non l'aggiunge. L'id 'tabella' hai ragione però l'avevo aggiunto in una seconda revisione e correggo il commento.
Ci riprovo e ti faccio sapere. Ciao.

Discussione: Riga clonata?...non proprio

Strumenti discussione

Ricerca discussione

Visualizza

Riga clonata?...non proprio

Permessi di invio