Dynamisch generierte elemente mit visibility verstecken.

[Eckhart]

Hallo,

Ich habe ein Formular mit mehreren angaben pro Zeile. Es ist nicht sicher wieviele Zeilen nötig sind, daher füge ich mit javascript neue Zeilen hinzu wenn etwas in die jeweils unterste Zeile geschrieben wird, und diese verlassen wird (onBlur). So weit funktioniert das auch ganz gut.

Da einige Angaben optional sind, möchte ich nun diese auch ausblenden, bis der Benutzer mit der Maus über eine Zeile fährt. Bevor jemand etwas dazu sagt, ich mache dies für mich selber, daher benötige ich keine Usability Ratschläge :).

Das Problem ist, dass in meinem Firefox die dynamisch generierten Elemente nicht ausgeblendet werden, während die im HTML vorhandene Zeile sich wie erwünscht verhält. Ich habe dazu eine einfachere test Version ins Netz gestellt: http://test.cornergraf.net/test.html. ACHTUNG: Für eine neue Zeile jeweils die unterste Zeile fokusieren und dann wieder verlassen.

Hier noch die wichtigsten Code-Schnippel:

function highlightRow(id){
        document.getElementById('final' + id).style.visibility = 'visible';
}

function endHighlightRow(id){
        document.getElementById('final' + id).style.visibility = 'hidden';
}

function addRow() {
        numRows = numRows +1;
        var tr = document.createElement("tr");

var mouseOut = document.createAttribute("onMouseOut");
        mouseOut.nodeValue = "endHighlightRow(" + numRows  +");";
        var mouseOver = document.createAttribute("onMouseOut");
        mouseOver.nodeValue = "highlightRow(" + numRows  +");";
        var id = document.createAttribute("id");
        id.nodeValue = numRows;
        tr.setAttributeNode(mouseOut);
        tr.setAttributeNode(mouseOver);

var tdFinal = document.createElement("td");
        var inputFinal = document.createElement("input");

var id = document.createAttribute("id");
        id.nodeValue = "final" + numRows;
        var onBlur = document.createAttribute("onBlur");
        onBlur.nodeValue = "leaveRow(" + numRows  +")";
        var size = document.createAttribute("size");
        size.nodeValue = "20";

inputFinal.setAttributeNode(id);
        inputFinal.setAttributeNode(onBlur);
        inputFinal.setAttributeNode(size);
        inputFinal.className = "final";
        inputFinal.size = 20;

// -------------------- Add Nodes to Table ----------------------------
        tdFinal.appendChild(inputFinal);
        tr.appendChild(tdFinal);
        document.getElementById('enclosureTable').appendChild(tr);
}

Kann mir jemand sagen warum dies nicht funktioniert, hat evtl. jemand vorschläge wie ich das anders realisieren kann?

Gruß,
Eckhart

[molily]

Hallo,

var tr = document.createElement("tr");
        var mouseOut = document.createAttribute("onMouseOut");
        mouseOut.nodeValue = "endHighlightRow(" + numRows  +");";
        tr.setAttributeNode(mouseOut);

Firefox mag nicht, wenn man Inline-Event-Handler als gewöhnliche DOM-Attribute setzt. Stattdessen weist man den Elementknoten die Handler traditionell zu:
elementknoten.onevent = handlerfunktion;
Also:
tr.onmouseout = endHighlightRow;

In endHighlightRow greifst du dann auf this.id zu, darin ist die Nummer gespeichert.
Im Übrigen muss ein id-Attributwert mit einem Buchstaben beginnen.

Mathias