[Javascript] Tabel maken via DOM

[Verwijderd]

Ik probeer voor een wysiwyg editor een tabel in te voegen vanuit een popup. Dit gaat opzich goed echter er worden een paar extra tags in de code gezet waardoor er lege ruimte gecreeerd wordt boven de tabel. Deze enters zouden naar mijn idee niet toegevoegd moeten worden maar waarom IE dat wel doet weet ik niet. De code die ik gebruik is als volgt:

code:

    function getHtml(){
        // we zullen de table opbouwen en daarna
        // wordt outerHTML opgevraagd die de gehele
        // html code van de table oplevert.
        
        table = document.createElement('TABLE');
        for(i = 0; i<rijen.value; i++){
            tr = table.insertRow();
            for(j = 0; j<kolommen.value; j++){
                td = tr.insertCell();
            }
        }
        
        breedteString = "";
        if(typeBreedte.value == "procent"){
            b = (breedte.value != "" && !isNaN(breedte.value)) ? breedte.value : 100;
            breedteString = b + "%";
        }
        else{
            b = (breedte.value != "" && !isNaN(breedte.value)) ? breedte.value : 400;
            breedteString = b + "px";
        }
        
        hoogteString = "";
        if(typeHoogte.value == "procent"){
            h = (hoogte.value != "" && !isNaN(hoogte.value)) ? hoogte.value : 100;
            hoogteString = h + "%";
        }
        else{
            h = (hoogte.value != "" && !isNaN(hoogte.value)) ? hoogte.value : 300;
            hoogteString = h + "px";
        }
                
        //Eigenschappen van de tabel zetten
        table.cellSpacing = (cellSpacing.value != "" && !isNaN(cellSpacing.value)) ? cellSpacing.value : 1;
        table.cellPadding = (cellPadding.value != "" && !isNaN(cellPadding.value)) ? cellPadding.value : 1;
        table.border = (borderDikte.value != "" && !isNaN(borderDikte.value)) ? borderDikte.value : 1;
        //table.style.borderColor = borderKleur.value;
        table.style.width = breedteString;
        table.style.height = hoogteString;
        
        return table.outerHTML;
    }

Wat ik dus als uitvoer krijg is het volgende:
<TABLE style="WIDTH: 100%; HEIGHT: 100%" cellSpacing=1 cellPadding=1 border=1><br />
<TBODY><br />
<TR><br />
<TD></TD><br />
<TD></TD></TR><br />
<TR><br />
<TD></TD><br />
<TD></TD></TR></TBODY></TABLE>

Heeft iemand enig idee waarom de <br /> achter de tags gezet wordt?

Gert

[Verwijderd]

Probeer het eens zonder de DOM functies insertRow()

Wat je namelijk doet is gewoon nieuwe elementen toevoegen en daarna de HTML weer opvragen. Dan kan je net zo goed (misschien zelfs wel sneller) meteen de HTML genereren.

Bij mijn oude editor los ik het ongeveer zo op:

code:

      var of = dialogArguments.oFrame;
      var HTMLTable = "<table id=ewp_element_to_style>";

              for (var i = 0; i < rows; i++) {
                HTMLTable += "<tr>";
                for (var j = 0; j < cols; j++) {
                  HTMLTable += "<td>&nbsp</td>";
                }
                HTMLTable += "</tr>";
              }

              HTMLTable += "</table>";
              dialogArguments.g_na_oRanges.pasteHTML(HTMLTable);
              var o = of.document.getElementById("ewp_element_to_style");
              o.border = _o("border").value;
              o.width = _o("width").value;
              o.height = _o("height").value;
              o.cellPadding = _o("padding").value;
              o.cellSpacing = _o("spacing").value;
              o.removeAttribute("id");

Probeer eens iets dergelijks zou ik zo zeggen...

[Bosmonster]

Als het inderdaad alleen voor IE is raad ik (en MS ) aan om de IE-tabel functies te gebruiken zoals insertRow, insertCell, etc.

Hiermee kun je ook eenvoudig nadat een tabel gemaakt is nog rijen toevoegen, verwijderen etc.

[Verwijderd]

Ik maak wel gebruik van de functies omdat het inderdaad daarna makkelijk wordt om rijen e.d. toe te voegen.
Echter de fout die erin zat heb ik er al uit. Het bleek niet te liggen aan de code die ik poste. Voordat ik de html opsloeg gooide ik in php een nl2br erover heen. IE gooit blijkbaar achter een aantal functies, waaronder die voor insertRow enz een \n zodat de code wat mooier wordt er niet allemaal achter elkaar komt te staan. Door de php functie werd dit omgezet in <br>, dit hoeft echter helemaal niet.

Allemaal in ieder geval bedankt voor de moeite.

[Verwijderd]

Bosmonster schreef op 06 mei 2004 @ 16:54:
Als het inderdaad alleen voor IE is raad ik (en MS ) aan om de IE-tabel functies te gebruiken zoals insertRow, insertCell, etc.

Dat zijn geen IE-specifieke methodes maar onderdeel van de DOM standaard.
W3C Dom specs

[Bosmonster]

Verwijderd schreef op 06 mei 2004 @ 20:20:
[...]

Dat zijn geen IE-specifieke methodes maar onderdeel van de DOM standaard.
W3C Dom specs

Joh.. dacht altijd dat die IE-only waren, aangezien het geen standaard DOMXML functies zijn...

weer wat geleerd