clonare tr

[Gumble]

ciao, ho un form dentro a una tabella. di base ho sempre una riga (non c'é mai il caso che non ce ne sia una) che definisce una rete (con vari dati come ip, speed, dns name,..ecc... insomma con dei field).

ho creato una funzione che permette di aggiungere una riga nuova partendo da quella di base. funziona cosi:

1)prendo la riga base
2)la clono
3)gli cambio l'id
4)setto l'onclick del link che sta nella prima td per richiamare la funzione 'del_net(id)' che permette di eliminare una riga aggiunta a piacimento.
5)l'attacco in fondo al tbody che delimita la zona delle net nella tabella..

ecco qui un estratto:

//newtr é una tr clonata partendo da una presente nell'html (basetr)
var newtr = basetr.cloneNode(true);

//counter vale 1,2,3,4...
var id = 'net_'+counter;

//assegno il nuovo id (net_1) alla nuova tr (newtr)
newtr.setAttribute('id', id);

//prendo tutte le td
var tdArr = newtr.getElementsByTagName('TD');

//nella prima si trova il mio link quindi setto l'onclick con la funzione e il nuovo id (net_1 per esempio)
tdArr[0].getElementsByTagName('A')[0].setAttribute('onclick','delNet(\''+id+'\');');

//per finire l'accodo
document.getElementById('netStuff').getElementsByTagName('TBODY')[0].appendChild(newtr);

il problema é che l'onclick non é settato bene.. e ogni riga contiene il link che fa "delNet(net_0) [che é la riga di base...]

dove sbaglio?????

[Gumble]

nessuno mi sa dare una mano?... non so piu dove sbattere la testa!

[Gumble]

ecco il codice.. magari voi capite perché!!!!

sapendo che la riga di base ha questa forma:

    
    <tr id="net_0">
      <td>[url="#"][img]../../public/public_img/public_icons/mini-del.gif[/img][/url]</td>
      <td><input type="text" name="cable[]" id="cable[]" value="47796" size="17"><input type="hidden" name="net_id[]" value="523"></td>
      <td><select name="speed[]" id="speed[]"><option value="null">none</option><option value="2"  selected>1 Gbits/s</option><option value="4" >10 Mbits/s</option><option value="1" >100 Mbits/s</option></select></td>
      <td><input type="text" name="mac[]" id="mac[]" value="00:0B:CD:D1:2E:10" size="17"></td>
      <td><input type="text" name="ip[]" id="ip[]" value="145.245.137.94" size="17"></td>
      <td><input type="text" name="netname[]" id="netname[]" value="rbals03" size="17"></td>
      <td><textarea name="aliases[]" id="aliases[]" rows="2" cols="15">a1,a2,a3</textarea></td>
    </tr> 

ecco le mie due funzioni.. addNet é richiamata da un link.. e anche delNet(net).
ho scaricato webPage inspector.. e quando faccio add.. la riga é effettivamente aggiunta! solo che quando clicco su 'del' non fa niente.. ho anche messo un alert per vedere se almeno entra nella funzione; ma niente!

//ADD A NEW NET AT THE END OF THE TABLE
function addNet(){

  //count children
  var children = document.getElementById('netStuff').getElementsByTagName('TBODY')[0].getElementsByTagName('TR');
  //minus 1
  var counter = children.length-1;

  //take usefull row (the one that will never be deleted)
  var fc_id = children[1].getAttribute('id');
  var basetr = document.getElementById(fc_id);

  //clone it
  var newtr = basetr.cloneNode(true);
  //create new id attribute
  var id = 'net_'+counter;

  //assign it to the new row
  newtr.setAttribute('id', id);

  nid = newtr.getAttribute('id');
  //nid = newtr.id;

  //get all td's
  var tdArr = newtr.getElementsByTagName('TD');

  //first td ->set del function argument
  tdArr[0].getElementsByTagName('A')[0].setAttribute('onclick','delNet(\''+nid+'\');');

  //loop and empty fields
  for(var i=1; i<tdArr.length; i++){
    if(i==2){
      tdArr[i].getElementsByTagName('SELECT')[0].value='null';
    }
    else if(i==6){
      if(tdArr[i].getElementsByTagName('TEXTAREA')[0].firstChild){
        tdArr[i].getElementsByTagName('TEXTAREA')[0].firstChild.nodeValue = '';
      }
    }
    else{
      if(tdArr[i].getElementsByTagName('INPUT')[1]){
        tdArr[i].getElementsByTagName('INPUT')[1].value = '';
      }
      if(tdArr[i].getElementsByTagName('INPUT')[0]){
        tdArr[i].getElementsByTagName('INPUT')[0].value = '';
      }
      else{
        alert('not able to set input field inside td '+i);
      }
    }
  }

  //append new row child
  document.getElementById('netStuff').getElementsByTagName('TBODY')[0].appendChild(newtr);
}

//DELETE A NET
function delNet(net){
  alert('trying to delete net '+net);
  //check if there are more than 1 rows
  var r = document.getElementById('netStuff').getElementsByTagName('TBODY')[0].getElementsByTagName('TR');
  if(r.length > 2){
    var c = document.getElementById(net);
    document.getElementById('netStuff').getElementsByTagName('TBODY')[0].removeChild(c);
    //reorder index
    for(var i=0; i<r.length; i++){
      if(i != 0){
        var newid = i - 1;
        var id = 'net_'+newid;
        r[i].setAttribute('id', id);
        r[i].getElementsByTagName('TD')[0].getElementsByTagName('A')[0].setAttribute('onclick','delNet(\''+id+'\');');
      }
    }
  }
  else{
    alert('You cannot delete this row');
  }
} 

[Xinod]

prima di tutto scordati di poter fare una cosa del genere
rifElemento.setAttribute('onclick','funzione(argom ento)');

i gestori evento o si appendono con attachEvent (IE) e addEventListener (browser standard)
o si settano brutalmente, sovrascrivendo eventuale stesso gestore gia' presente
rifElemento.onclick=nomefunzione
(nota: nomefunzione senza le parentesi tonde)

serve passare un valore come parametro della funzione? bene
rifElemento.onclick=function(){nomefunzione('ciao mondo');}

e se questo valore e' una variabile? qui le cose si complicano un po'

id e' in scope finche' siamo all' interno della funzione,
quando esegui la funzione anonima che richiama nomefunzione l' unico valore che la tua variabile id puo' contenere e' l' ultimo che e' stato settato

al momento sono stanchissimo e non riesco ad approfondire
ma la stessa tipologia di problema e' risolta x es. qui, qui e prima ancora qui

non e' l' unico modo di risolvere, ma dato questo specifico scenario ho il sospetto sia la soluzione meno dolorosa

[Gumble]

ciao, prima di tutto grazie mille per la risposta!

allora.. c'é un problemino.. non capisco troppo le soluzioni che hai linkato. il fatto é che con js e dom sono alle prime armi.

mi spieghi? cosa devo cambiare esattamente?

e poi ancora.. perché su firefox quello che ho postato va lo stesso anche se faccio setAttribute('onclick', funzione(par))?

[Gumble]

ri-ciao!

sono riuscito a farlo funzionare.. nonostante non capisca troppo bene dove sta il problema.. cioé: so che non é il fatto la var non é in scope... ma non ho ben capito come risolvi il problema.

cmq grazie mille per la soluzione