Explorer e setAttribute

**Kandalf** · 19-02-2009, 20:16

Ciao a tutti, sto litigando con IE perchè non fa quello che dovrebbe con setAttribute, ma per me è fondamentale usare quel comando, dato che devo aggiungere e togliere campi dal form.
Ho provato delle alternative ma nn riesco a passargli poi come parametro il tr da cancellare e risistemare gli indici del form.
Ecco il codice completo.

Codice PHP:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">



<html>

<head>

<title>Aggiungi</title>

<script language="JavaScript">



var vnCountField=0;



function fnAggiungiField(){



    var oTr = document.createElement("TR");

    var oTd1 = document.createElement("TD");

    var oTd2 = document.createElement("TD");

    var oField = document.createElement("INPUT");

    var oFieldCancel = document.createElement("INPUT");



    oField.setAttribute("type","text");

    oField.setAttribute("name","testo" + vnCountField);

    oField.setAttribute("value",document.getElementById("osCategoria").value);

    oField.setAttribute("disabled", true);

    

    oFieldCancel.setAttribute("type", "button");

    oFieldCancel.setAttribute("name", "cancel" + vnCountField);

    oFieldCancel.setAttribute("value", "Cancella" + vnCountField);

    oFieldCancel.setAttribute("onclick", "fnCancellaField(" + vnCountField + ")");

        

    oTd1.appendChild(oField);

    oTd2.appendChild(oFieldCancel);

    oTr.appendChild(oTd1);

    oTr.appendChild(oTd2);



    document.getElementById('tabella').getElementsByTagName('TBODY')[0].appendChild(oTr);



    vnCountField++

}





function fnCancellaField(pnCancellaField) {



    var tb = document.getElementById('tabella').getElementsByTagName('TBODY')[0];

    var selectedTr = tb.getElementsByTagName('TR')[pnCancellaField];

    tb.removeChild(selectedTr);

        

    vnCountField--

    fnAggiornaIndiciTabella();

}



function fnAggiornaIndiciTabella() {



    var tb = document.getElementById('tabella').getElementsByTagName('TBODY')[0];

    

    for (var i = 0; i < vnCountField; i++) {

        var otTr = tb.getElementsByTagName("TR")[i];

        var otTd = otTr.getElementsByTagName("TD")[1];

        var oFieldCancel = otTd.getElementsByTagName("INPUT")[0];

        oFieldCancel.setAttribute("onClick", "fnCancellaField(" + i + ")");

        oFieldCancel.setAttribute("value", "Cancella" + i);

        oFieldCancel.setAttribute("name", "cancel" + i);

    }



}

</script>

</head>

<body>

<form name="modulo">

    <input type="button" value="Aggiungi" onclick="fnAggiungiField()">

    <input type="text" id="osCategoria" name="osCategoria">



</p>

<div>

<table border="0" id="tabella">

    <tbody>

    </tbody>

</table>

</div>

</form>

</body>

</html>

**KillerWorm** · 19-02-2009, 20:56

Non so se può esserti utile ma prova a dare uno sguardo a questa vecchia discussione:
http://forum.html.it/forum/showthrea...hreadid=848168

In pratica per impostare il gestore onclick dovresti utilizzare attachEvent o addEventListener e non impostarlo con setAttribute..

**artorius** · 19-02-2009, 21:10

Posso suggerirti di cambiare approccio?

Sfruttando lo scope delle funzioni puoi giocare sugli elementi, ottenendo la riga da cancellare, partendo dall'input e salendo di due nodi.

codice:

var deleteRow = function(){
   //In questo punto this è l'elemento input che causa l'evento onclick
   // this = input, this.parentNode = td, this.parentNode.parentNode = tr
   var tr = this.parentNode.parentNode;
   tr.parentNode.removeChild(tr);
}

ed aggiungi questa funzione con onclick:

codice:

oFieldCancel.onclick = deleteRow;

Su quest'idea puoi modificare anche altre funzioni

**Kandalf** · 19-02-2009, 21:19

ok grazie sto provando:

x artorius

poi però come aggiorno il name?

in pratica aggiungendoli avrei name1 name2 name3
se cancello quello centrale avrei
name1 e name2

gracias

**artorius** · 19-02-2009, 21:51

'spetta, vuoi dire che vuoi i name in progressione?

uff, anche se non mi sembra poi un problema, puoi sempre scorrere l'array di tr e modificare gli indici:

codice:

var deleteRow = function(){
   //In questo punto this è l'elemento input che causa l'evento onclick
   // this = input, this.parentNode = td, this.parentNode.parentNode = tr
   var tr = this.parentNode.parentNode;
   var tbody = tr.parentNode
   tbody.removeChild(tr);
   aggiornaIndici(tbody);
}

var aggiornaIndici = function(tbody){
   var index = 0;
   for(c = tbody.firstChild; c != null; c = c.nextSibling){
      if(c.nodeType == 1 && c.tagName.toLowerCase() == 'tr'){
         for(td = c.firstChild; td != null; td = td.nextSibling){
            if(td.nodeType == 1 && td.tagName.toLowerCase() == 'td'){
               for(inpt = td.firstChild; inpt != null; inpt = inpt.nextSibling){
                  if(inpt.nodeType == 1 && inpt.tagName.toLowerCase() == 'input'){
                     if(inpt.type.toLowerCase() == 'text')
                        inpt.name = 'testo'+index;
                     if(inpt.type.toLowerCase() == 'button'){
                        inpt.name = 'cancel'+index;
                        inpt.value = 'Cancella '+index;
                     }
                  }
               }
            }
         }
         index++;
      }
   }
}

**Kandalf** · 19-02-2009, 22:06

grazie 1000 domani lo provo
buona serata

Discussione: Explorer e setAttribute

Strumenti discussione

Ricerca discussione

Visualizza

Explorer e setAttribute

Permessi di invio