[javascript]Tabel dynamisch maken IE doet niks FF wel - Softwareontwikkeling

woensdag 19 december 2007 10:22

Acties:

Topicstarter

Ik probeer tabbellen te maken met javascript.

Dit wil ik doen omdat ik op dit moment met AJAX altijd alle gegevens terugstuur waarin ik in php al een tabel gemaakt heb. Ik wil eigenlijk dat ik met php puur informatie terug geef en dat ik met javascript afhankelijk van mijn gegevens een variabele tabel opbouw.

Ik heb nu de volgende code gemaakt. Maar ik begrijp niet waarom het niet werkt in IE. Ik krijg zelfs geen foutmelding in IE. In FF en Safari werkt het wel

code:

<html>
    <head>
        <title>Tabellen maken</title>
        
    </head>

    <body onload="test()">
    
        <table id="myTable">
            <tbody id="myTableBody"></tbody>
        </table>
        
        
        <script language="javascript">
        function test()
        {
            alert('Functie wordt uitgevoerd');
            var cell = document.createElement("td").appendChild(document.createTextNode("Jochem"));
            var row = document.createElement("tr").appendChild(cell);
            document.getElementById("myTableBody").appendChild(row);
        }
        </script>
    </body>
    
</html>

Ik doe die alert zodat ik zeker weet dat de functie wordt uitgevoerd. De alert verschijnt ook netjes in IE.

Ik begrijp er niks meer van

Jochemmol

woensdag 19 december 2007 10:27

Acties:

killercow

eth0

Zie er zo direct niets fouts aan,
Gooi je alert eens steeds een regeltje lager?, dan kun je iig welke regel hij niet snapt.
Alert desnoods de uitkomst van bepaalde functies eens, bijvoorbeelde de waarde van de laatte getElementById, als die undefined terug geeft weet je al meer.

, al hoewel, direct chainen van createNode en appendChild commands denk ik niet werkt vanwege de return waardes van beide fucties.

[ Voor 19% gewijzigd door killercow op 19-12-2007 13:22 ]

openkat.nl al gezien?

woensdag 19 december 2007 10:28

Acties:

Verwijderd

doe eens

JavaScript:

1	alert(row.nodeName);

aan het eind van je test functie

woensdag 19 december 2007 10:58

Acties:

BikkelZ

CMD+Z

Deze methodes werken volgens mij ook prima cross-browser:

http://msdn2.microsoft.com/en-us/library/ms532998.aspx

Ik vind ze een stuk overzichtelijker werken. Wat je nu doet lijkt een beetje op ID's meegeven aan form elementen die al een name attribute hebben.

[ Voor 39% gewijzigd door BikkelZ op 19-12-2007 10:59 ]

iOS developer

woensdag 19 december 2007 11:01

Acties:

Jochemmol

Topicstarter

Ik heb de alert toegevoegd en hij geeft dit. #text

code:

1	alert(row.nodeName); --> #text

[ Voor 3% gewijzigd door Jochemmol op 19-12-2007 11:01 ]

Jochemmol

woensdag 19 december 2007 11:11

Acties:

Verwijderd

de bedoeling is niet dat je dat meldt, want dat wist ik al.

De bedoeling is dat je erover gaat nadenken en tot de conclusie komt dat je helemaal geen cellen en rijen aan het toevoegen bent, maar enkel een textnode

en dat dat niet zichtbaar is in IE

en dat dat komt omdat de appendChild method de zojuist geappende child retourneerd en niet de parent

woensdag 19 december 2007 11:17

Acties:

Jochemmol

Topicstarter

BikkelZ schreef op woensdag 19 december 2007 @ 10:58:
Deze methodes werken volgens mij ook prima cross-browser:

http://msdn2.microsoft.com/en-us/library/ms532998.aspx

Ik vind ze een stuk overzichtelijker werken. Wat je nu doet lijkt een beetje op ID's meegeven aan form elementen die al een name attribute hebben.

Ik heb je link doorgelezen. Het laatste voorbeeld: Example: Document Object Model
dat verschilt praktisch niks van wat ik doe.

Jochemmol

woensdag 19 december 2007 11:19

Acties:

Jochemmol

Topicstarter

Verwijderd schreef op woensdag 19 december 2007 @ 11:11:
de bedoeling is niet dat je dat meldt, want dat wist ik al.

De bedoeling is dat je erover gaat nadenken en tot de conclusie komt dat je helemaal geen cellen en rijen aan het toevoegen bent, maar enkel een textnode

en dat dat niet werkt in IE

en dat dat komt omdat de appendChild method de zojuist geappende child retourneerd en niet de parent

Aan de ene kant snap ik je maar ik creeer toch een td object waarin ik een textnode in toevoeg met een test.?

In het voorbeeld van microsoft zie ik dat ze innerHTML gebruiken. Voeg ik dan pas iets toe aan aan een cell

Ik snap dan niet zo goed dat FF het wel snapt. Ik denk dat ik met document.createTextNode("Jochem")); de tekst jochem toevoeg aan een td. In FF is dat ook zo. Hoe zit microsoft dat dan?

[ Voor 12% gewijzigd door Jochemmol op 19-12-2007 11:21 ]

Jochemmol

woensdag 19 december 2007 11:23

Acties:

Verwijderd

in alle browsers wordt een textnode aan de tbody toegevoegd, geen cel, geen rij
je doet helemaal niks met de td en de tr, want de inhoud van de variabele cell bevat alleen de textnode. Dientengevolge de inhoud van je row variabele ook

[ Voor 4% gewijzigd door Verwijderd op 19-12-2007 11:25 . Reden: typos ]

woensdag 19 december 2007 11:32

Acties:

BikkelZ

CMD+Z

Mijn voorbeeld over de 'TOM' methode versus de 'DOM' methode op MSDN was niet om te zeggen hoe het wel moet, maar hoe je kortere en duidelijkere code kunt maken door specialistischere functies te gebruiken.

Code die je zelf weer makkelijker kunt deduceren als je ze terug leest en daardoor misschien minder snel tot fouten leidt.

iOS developer

woensdag 19 december 2007 12:17

Acties:

XWB

Devver

HTML:

<html>
    <head>
        <title>Tabellen maken</title>
        
        <script type="text/javascript">
        function test()
        {
                    var table = document.getElementById("myTable");
                    var lastRow = table.rows.length;
                    var row = table.insertRow(lastRow);
                    var cell = row.insertCell(-1);
                    cell.appendChild ( document.createTextNode ( 'Ik' ) );
        }
        </script>
    </head>
    <body>
        <table id="myTable"></table>
        <script type="text/javascript">test();</script>
    </body>
</html>

Vergeet ook je doctype niet

March of the Eagles

Pagina: 1

Reageer