Tabelle Erweitern

[dp]

Hallo,

ich möchte per JavaScript eine Tabelle erweitern. Hierzu folgender Code:

table = getElement("id","table",null);

tr = document.createElement("tr");
td1 = document.createElement("td");
td2 = document.createElement("td");

tr.appendChild(td1);
tr.appendChild(td2);

table.appendChild(tr);

Ich arbeite wie ihr sehen könnt mit der DHTML-Bibliothek. Ich würde jetzt ganz gerne "td1" und "td2" ein paar Styleeigenschaften vergeben - geht aber nicht, zumindest mit dem IE 6.0. Hinzufügen wollte ich die Werte eigentlich über createAttribute(), nodeValue() und setAttributeNode(). Doch dem IE gefällt setAttributeNode() nicht, er sagt die Funktion existiert nicht. Andere Browser (also alle, das ärgert micht sehr) machen keine Probleme und fügen die CSS-Werte ohne murren "td1" und "td2" zu. Ich habe schon versucht, über Umwege meinem dynamischen HTML-Code CSS zu verpassen, klappt aber alles nicht ... habt ihr eventuell eine Idee, wie ich "td1" und "td2" CSS beibringen kann? Die Lösung sollte wenn möglich ohne Browserweichen funktionieren, allerdings nur die aktuellen Versionen der Browser abdecken...

Grüße
Daniel

[Struppi]

Ich arbeite wie ihr sehen könnt mit der DHTML-Bibliothek. Ich würde jetzt ganz gerne "td1" und "td2" ein paar Styleeigenschaften vergeben - geht aber nicht, zumindest mit dem IE 6.0. Hinzufügen wollte ich die Werte eigentlich über createAttribute(), nodeValue() und setAttributeNode().

Die Funktionen sind dafür nicht nötig. es reicht einfach:

[objekt].style.eigenschaft = 'wert';

Das geht dann in allen Browsern, die das style Attribut kennen.

Struppi.

[dp]

Die Funktionen sind dafür nicht nötig. es reicht einfach:

[objekt].style.eigenschaft = 'wert';

Das geht dann in allen Browsern, die das style Attribut kennen.

*bling* XD

Danke euch...

[dp]

Ach kacke - ich hätt's vielleicht mal im IE ausprobieren sollen, bevor ich micht gefreut habe. Folgender Code wirft im IE nicht mal einen Fehler oO . Der Rest meiner "Browser-Armee" frisst den Code...

var table = getElement("id","table",null);

tr = document.createElement("tr");
td1 = document.createElement("td");
td2 = document.createElement("td");

td1.style.backgroundColor = "red";

tr.appendChild(td1);
tr.appendChild(td2);

text = document.createTextNode("bla");
td1.appendChild(text);

table.appendChild(tr);

alert("bla");

Aaaaber das "bla" wird vom IE ausgegeben. Ich versteh das nicht...

Gruß
Daniel

[Struppi]

Ach kacke - ich hätt's vielleicht mal im IE ausprobieren sollen, bevor ich micht gefreut habe. Folgender Code wirft im IE nicht mal einen Fehler oO . Der Rest meiner "Browser-Armee" frisst den Code...

Das könnte auf das fehlende von Ashura schon erwähnte tbody Element hinweisen.

Aaaaber das "bla" wird vom IE ausgegeben. Ich versteh das nicht...

Jetzt ist die Frage, wie du das table Element erstellt hast.

Struppi.

[dp]

Jetzt ist die Frage, wie du das table Element erstellt hast.

Per Hand. Die Tabelle ist eine ganz normale Standard-Tabele ala

<table id="table" border="0">
  <tr>
    <td></td>
  </tr>
</table>

Und mit der DHTML-Bibi von SelfHTML greife ich wie man im Code sehen kann auf die Tabelle zu. Oder meinst du was anderes? "tbody" sagt mir mal gar nichts, außer dass es laut SelfHTML ein freiwilliger Tabellen-TAG ist...

Gruß
Daniel

[Struppi]

Und mit der DHTML-Bibi von SelfHTML greife ich wie man im Code sehen kann auf die Tabelle zu. Oder meinst du was anderes? "tbody" sagt mir mal gar nichts, außer dass es laut SelfHTML ein freiwilliger Tabellen-TAG ist...

Der IE braucht explizit das tbody Element, wenn du mit JS auf Tabellenkonstrukte zugreifen willst. lass dir mal table.innerHTML ausgeben und dir wird etwas auffallen.

Das könntest du beheben indem du nach:
<table id="table" border="0">
<tbody>
....
mit table.firstChild.appendChild(tr) die Reihe einfügst.

Dann taucht aber ein Problem im FF auf, alle Leerzeichen und Umbrüche sind für ihn  schon ein Knoten. Daher musst du dann jedes Zeichen nach <table> eliminieren
<table id="table" border="0"><tbody>

oder direkt auf tbody, anstatt auf das table Element zugreifen

Struppi.

[dp]

Der IE braucht explizit das tbody Element, wenn du mit JS auf Tabellenkonstrukte zugreifen willst. lass dir mal table.innerHTML ausgeben und dir wird etwas auffallen.

Ich seh's... und es funktioniert! Sehr gut, so was zu wissen. Vor allem dann, wenn man mal mit AJAX seine Seite dynamisch ändern möchte und es nicht klappt, weil der IE irgendwelche freiwilligen Tags zu Zwang-Tags umpolt. Naja, ab der Version 7.0 wird ja alles besser ;-) Vielen Dank für deine Hilfe!

Gruß
Daniel

[wahsaga]

hi,

Ich würde jetzt ganz gerne "td1" und "td2" ein paar Styleeigenschaften vergeben - geht aber nicht, zumindest mit dem IE 6.0. Hinzufügen wollte ich die Werte eigentlich über createAttribute(), nodeValue() und setAttributeNode().

Es würde hier schon unzählige Male gesagt, dass der IE damit immer wieder Probleme hat - insb. dann, wenn man Eigenschaften zu erstellen versucht, die ein Element sowieso schon.

Wozu denn immer so ein Aufwand?
Ein mit createElement erzeugter Knoten hat "von Geburt an" ein style-Objekt. Also setzt man die gewünschten CSS-Eigenschaften einfach darüber, und gut is'.

gruß,
wahsaga

[Ashura]

Hallo dp.

table = getElement("id","table",null);

tr = document.createElement("tr");
td1 = document.createElement("td");
td2 = document.createElement("td");

tr.appendChild(td1);
tr.appendChild(td2);

table.appendChild(tr);

  
Dieses Geraffel (was zumindest im IE mangels eingefügtem tbody-Element nicht einmal funktioniert) kannst du dir sparen, indem du [insertRow](http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-39872903) und [insertCell](http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-68927016) nutzt.  
  
  
Einen schönen Donnerstag noch.  
  
Gruß, Ashura  

-- 
sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:} fl:( ss:) ls:[ js:|  
„It is required that HTML be a common language between all platforms. This implies no device-specific markup, or anything which requires control over fonts or colors, for example. This is in keeping with the SGML ideal.“  
[[HTML Design Constraints: Logical Markup](http://www.w3.org/History/19921103-hypertext/hypertext/WWW/MarkUp/HTMLConstraints.html)]

[wahsaga]

hi Ashura,

ich hab noch überlegt, ob ich das auch anmerken sollte - aber ich dachte mir, du kommst bestimmt noch damit :-)

gruß,
wahsaga

[JürgenB]

Hallo Ashura,

... insertRow und insertCell nutzt.

eigentlich habe ich diesen Kommentar schon hier:  https://forum.selfhtml.org/?t=130513&m=843632 erwartet und dachte, du wärst nicht gut drauf. Aber wie ich jetzt sehe, bist du doch ok.

Gruß, Jürgen

[Ashura]

Hallo Jürgen.

eigentlich habe ich diesen Kommentar schon hier:  https://forum.selfhtml.org/?t=130513&m=843632 erwartet und dachte, du wärst nicht gut drauf. Aber wie ich jetzt sehe, bist du doch ok.

Ich sehe schon, mein Ruf eilt mir voraus …

Einen schönen Donnerstag noch.

Gruß, Ashura