Keine Ausgabe von einer Tabelle
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
abziehen
angesprochenen punkte
attribut
basierten methoden
blaue rahmen
browser
code
dom
einzelne knoten
element
ende
http
interpretieren
komplette tabelle
puffer
spezifikation
tabelle
tag
url
wissen
-
Hi!
Ich schon wieder! Ich würde gerne wissen, warum ich hier keine tag/tabelle">Tabelle ausgegeben bekomme. Durch Probieren mit dem Border hab ich gemerkt, dass der Textinhalt HINTER der Tabelle erscheinen muss... Ich versteh es nicht!
document.getElementById('einkaeufe').innerHTML += "<table style='border:1px solid red; width:1000px; height:30px;'>"; for(var x = 0; x <= shopliste.length; x++) { if (shopliste[x][4] != 0) { document.getElementById('einkaeufe').innerHTML += "<tr style='border:2px solid blue;'>"; document.getElementById('einkaeufe').innerHTML += "<td style='border:5px solid yellow;'>" + shopliste[x][4] + "x " + shopliste[x][0] + "</td>"; document.getElementById('einkaeufe').innerHTML += "<td>Esswert: " + shopliste[x][2] + "; Trinkwert: " + shopliste[x][3] + "</td>"; document.getElementById('einkaeufe').innerHTML += "<td><a href=\"javascript: Itemweg('" + shopliste[x][0] + "');\">ABZIEHEN</a></td>"; document.getElementById('einkaeufe').innerHTML += "</tr>"; } } document.getElementById('einkaeufe').innerHTML += "</table>" -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Hi, da sind 2 Probleme. Zum einen ein Fehler, nämlich zu zählst über das Ende des Arrays hinaus.
Mach mal aus:
for(var x = 0; x <= shopliste.length; x++)
ein
for(var x = 0; x < shopliste.length; x++)
dann bleibst du in den Grenzen des Arrays. Denk dran, Arrays beginnen bei 0 und nicht bei 1.
Das andere ist ein Problem von DOM. Du schreibst zu schnell in das innerHTML des Elements rein, so dass effektiv zuerst das "</table>" geschrieben wird und dann der Inhalt. Puffer das ganze in einer Variablen und weise die erst am Ende dem Element zu, dann klappt's. Folgender code ist getestet und funktioniert. Ich hab nur die 2 angesprochenen Punkte geändert:
<html> <head> <script language="javascript"> shopliste = new Array (); shopliste [0] = new Array ("Salat", "", 50, 100, 4); shopliste [1] = new Array ("Burger", "", 500, 100, 1); function drawTable() { innerHTML = "<table style=\"border:2px solid red; width:1000px; height:30px;\">"; for(var x = 0; x < shopliste.length; x++) if (shopliste [x][4] ) { innerHTML += "<tr style=\"border:2px solid blue;\">"; innerHTML += "<td style=\"border:5px solid yellow;\">" + shopliste[x][4] + "x " + shopliste[x][0] + "</td>"; innerHTML += "<td>Esswert: " + shopliste[x][2] + "; Trinkwert: " + shopliste[x][3] + "</td>"; innerHTML += "<td><a href=\"javascript: Itemweg('" + shopliste[x][0] + "');\">ABZIEHEN</a></td>"; innerHTML += "</tr>"; } innerHTML += "</table>" document.getElementById('einkaeufe').innerHTML = innerHTML; } </script> </head> <body onload="drawTable()"> <div id="einkaeufe"> </div> </body> </html>
Beitrag zuletzt geändert: 21.8.2009 23:12:56 von census -
*schäm* DOM?
Wie kann ich denn "zu schnell" ins innerHTML schreiben? Ich dachte das Zeug wird Zeilenweise ausgelesen ^^" Mit der Vari ists n bisschen umständlich, aber kürzer wird der Code dann schon... Sowas!! ><
Danke! -
Hi,
nicole schrieb:
Wie kann ich denn "zu schnell" ins innerHTML schreiben? Ich dachte das Zeug wird Zeilenweise ausgelesen ^^"
so wie ich das sehe schreibst du nicht zu schnell, sondern "häppchenweise". "Schuld" sind dann die Browser die z.B. erkennen, dass das abschließende </table> Tag fehlt. Der Browser ergänzt das dann freundlicherweise (je nach Brower sieht diese Ergänzung anders aus) und nimmt diese Ergänzung auch dann nicht mehr zurück, wenn du das nächste Häppchen HTML schreibst. So kommt insgesamt ein ziemlich wirrer HTML Code raus. Wenn du wissen möchtest wie der aussieht, dann "alerte" doch einfach die innerHTML.
Mit der Vari ists n bisschen umständlich, aber kürzer wird der Code dann schon... Sowas!!
Ist es nicht eigentlich viel umständlicher und wohl auch langsamer jedes mal die Funktion document.getElementById aufzurufen?
BTW: Ich habe gesehen, dass der blaue Rahmen um die Zeile zumindest im IE nicht funktioniert. Laut HTML Spezifikation ist dies auch nicht vorgesehen, denn das Attribut "border" gibt es weder beim <tr> noch beim <td> Element. Solange es die Browser interpretieren ist es ja gut, falls nicht sieht es halt dann nicht wie erwartet aus.
Gruß
Manni -
Danke für die Infos.
-
Warum arbeitest du mit innerHTML statt mit DOM? Die auf DOM basierten Methoden sind schneller, einfacher, ressourcenschonender und die Tags sind leichter anzusprechen. So kannst du zB einzelne Knoten in deiner Tabelle hinzufügen, löschen, ändern usw., statt die komplette Tabelle neu zu schreiben.
-
Wie ich schon gesagt habe: "DOM?"
Außerdem gehts nicht um die Tabelle! Die ändert sich eh immer, wenn irgendwas angeklickt wird. -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage