JavaScript Problem beim dynamischen erstellen von Tablen

DeusExMachina · 11. Oktober 2012

Derzeit beschäftige ich mich gezwungener Massen mit Javascript (was ich eigentlich gar nicht will aber muss).

Target of the Day war es gestern eine table mit javascript dynamisch zu erstellen und mit dem 1x1 zu füllen:

Mein Lösungsansatz dazu war:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<style>
<!--

.einmaleins{
            border: 3px double black;
            width: 500;
            height: 500;
            margin:0 auto;
            }
-->
</style>

<script language="JavaScript">


function eins(){
        //node = document.getElementById('table1');
        var myTable = document.createElement("table");
        var myTableBody  = document.createElement("tbody");

         for(y=1; y<=10;y++){
             myCurrentRow = document.createElement("tr");
             for(x=1; x<=10; x++){
                   myCurrentCell = document.createElement("td");
                   erg =document.createTextNode((x*y));
                   myCurrentCell.appendChild(erg);
                   myCurrentRow.appendChild(myCurrentCell)
             }
             myTableBody.appendChild(myCurrentRow);
           }
          myTable.appendChild(myTableBody);
          myTable.setAttribute("ID", table1x1);
          myTable.SetAttribute("class", einmaleins);

         }

</script>


</head>
<body onload="eins()">

     

<div id="table1x1" align="center">

</div>

</body>
</html>

Nur leider Funktioniert der nicht und ich hab zwar die halbe Nacht damit verbraucht das Netz nach einer Lösung zu durch forsten aber entweder übersehe eine Kleinigkeit oder mein Ansatz ist total falsch.

Ich bräuchte mal einen Schubser in die Richtige Richtung und eine Erklärung was der Fehler war.

Danke schon mal im vorraus.

Madman1209 · 11. Oktober 2012

Hi,

wenn ich den Code 1:1 kopiere und in einer Datei öffne zeigt mir Firebug den Fehler

Code:

ReferenceError: einmaleins is not defined
myTable.SetAttribute("class", einmaleins);

Scheint wohl etwas grundlegendes falsch zu sein bei dem Code.

Außerdem ist die Zeichenkodierung nicht deklariert, sollte auch mit rein.

VG,
Mad

mercsen · 11. Oktober 2012

also erstmal sind da einige syntax fehler drinne

myTable.SetAttribute("class", einmaleins);

-->

myTable.setAttribute("class", einmaleins);

dann müssen die ID's als string übergeben werden, net als variable:

myTable.setAttribute("ID", table1x1);
myTable.SetAttribute("class", einmaleins);

---->

myTable.setAttribute("ID", 'table1x1');
myTable.setAttribute("class", 'einmaleins');

und als letzes musst du die table natürlich noch dem DOM einfügen

P.S.
ein blick in den debugger hätte dir das auch gesagt

Madman1209 · 11. Oktober 2012

Hi,

ein blick in den debugger hätte dir das auch gesagt

Darauf wollte ich raus

"Firebug" für Firefox z.B. installieren, den Code laufen lassen und debuggen.

VG,
Mad

mercsen · 11. Oktober 2012

so funktioniert es!
Musst nur auf 'klick' klicken dann startet das script

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<style>
<!--
 
.einmaleins{
            border: 3px double black;
            width: 500;
            height: 500;
            margin:0 auto;
            }
-->
</style>
 
<script language="JavaScript">
 
 
function eins(){
    alert('go');
        //node = document.getElementById('table1');
        var myTable = document.createElement("table");
        var myTableBody  = document.createElement("tbody");
 
         for(y=1; y<=10;y++){
             myCurrentRow = document.createElement("tr");
             for(x=1; x<=10; x++){
                   myCurrentCell = document.createElement("td");
                   erg =document.createTextNode((x*y));
                   myCurrentCell.appendChild(erg);
                   myCurrentRow.appendChild(myCurrentCell)
             }
             myTableBody.appendChild(myCurrentRow);
           }
          myTable.appendChild(myTableBody);
          myTable.setAttribute("ID", 'table1x1');
          myTable.setAttribute("class", 'einmaleins');
          
        document.getElementById('anzeige').appendChild(myTable);
          
         }
 
</script>
 
 
</head>
<body >
 
    <span onclick="eins()">Klick</span>
 
<div id="anzeige" align="center">
 
</div>
 
</body>
</html>

ich habe das div mal umbenannt da eine id nur einmal vergeben werden darf!
du hast schlicht vergessen die erzeugte tabelle anzuzeigen

edit:
Firebug??
Ich würde ehr den Chromedebugger empfehlen, kann mehr und ist schneller. Aber jedem das seine

P.S.
war ganz schöne Kopfarbeit, wie lange habe ich kein pure JS mehr gemacht? ^^

DeusExMachina · 11. Oktober 2012

Debugger hat die uns auferlegte Umgebung mit der wir das machen müssen leider nicht (und von Firebug hab ich ehrlich gesagt Null, nada, zero und nix Plan).

Javascript ist so ein erst Kontakt Problem nie was damit gemacht und nie Interesse daran gehabt. Und das Interesse ist eigentlich immer noch nicht da aber es ist halt grad gefordert.....

Also bitte entschuldigt wenn ich mich etwas Noobig anstelle.

:::::::::

Was der DOM ist hab schon nachgegoogle aber wie füge ich die tabelle ein?

Madman1209 · 11. Oktober 2012

Hi,

und so funktioniert es ohne Klick und ohne den Fehlerhinweis, dass das Dokument nicht dem Standard entspricht weil keine Zeichenkodierung festgelegt ist:

Code:

	    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
		<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
    <title></title>
    <style>
    <!--
    .einmaleins{
    border: 3px double black;
    width: 500;
    height: 500;
    margin:0 auto;
    }
    -->
    </style>
    <script language="JavaScript">
    function eins(){

    //node = document.getElementById('table1');
    var myTable = document.createElement("table");
    var myTableBody = document.createElement("tbody");
    for(y=1; y<=10;y++){
    myCurrentRow = document.createElement("tr");
    for(x=1; x<=10; x++){
    myCurrentCell = document.createElement("td");
    erg =document.createTextNode((x*y));
    myCurrentCell.appendChild(erg);
    myCurrentRow.appendChild(myCurrentCell)
    }
    myTableBody.appendChild(myCurrentRow);
    }
    myTable.appendChild(myTableBody);
    myTable.setAttribute("ID", 'table1x1');
    myTable.setAttribute("class", 'einmaleins');
    document.getElementById('anzeige').appendChild(myTable);
    }
    </script>
    </head>
    <body onload="eins()">

    <div id="anzeige" align="center">
    </div>
    </body>
    </html>

Du hattest die Tabelle erzeugt aber nicht dem "DIV" hinzugefügt, deswegen war die Tabelle da aber man konnte sie nicht sehen.

Und Firebug ist ein Firefox Addon. Einfach installieren und aktivieren, dann kannst du im Firefox JavaScript wunderbar debuggen.

VG,
Mad

DeusExMachina · 11. Oktober 2012

@Mercsen: Da haste mich geninjad danke ich verstehe jetzt auch warum es nicht Funktioniert hat.

@Madman1209: Ich weiß schon was Firebug ist nur sein Funktionsumfang ist mir nicht geläufig und als Opera nutzer... Aber ich werde mir den privat mal installieren (auf den schüsseln hier haben wir nur IE und keine Rechte was zu installieren) und mich da einfuchsen.

Ich bedanke mich noch mal bei allen für ihre Hilfe und werde mich jetzt mal ans Kommentieren machen damit ich nicht vergesse was ich gelernt habe.
In dem Sinne Danke nochmal und bis zum nächsten Problem

Madman1209 · 11. Oktober 2012

Hi,

Internet Explorer => F12 drücken => Fehlerkonsole ähnlich wie Firebug.

Aber im IE Internetseiten zu entwickeln ist so wie auf einem alten Audi 80 mit nur 3 Reifen und Kolbenfresser den Führerschein zu machen: schwierig, unnötig kompliziert und ein wenig weltfremd

Chrome oder Firefox benutzen für sowas! Viel besser!

VG,
Mad

kling1 · 11. Oktober 2012

vorallem javascript im ie

boah javascript ohne jquery gibt es ja auch noch

Suche

JavaScript Problem beim dynamischen erstellen von Tablen

DeusExMachina

Lt. Junior Grade

Madman1209

Fleet Admiral

mercsen

Lt. Commander

Madman1209

Fleet Admiral

mercsen

Lt. Commander

DeusExMachina

Lt. Junior Grade

Madman1209

Fleet Admiral

DeusExMachina

Lt. Junior Grade

Madman1209

Fleet Admiral

kling1

Gast

Ähnliche Themen