Stylesheets werden in Funktion nicht interpretiert

[Tucklemuck]

Hallo zusammen,

ich beschäftige mich neuerdings mit JavaScript und habe folgendes Problem:

Wenn ich eine Tabelle mit einem einfachen JavaScript erstellen lasse, werden die entsprechenden StyleSheets angewendet.

Wenn ich aber die selbe Tabelle mit Hilfe einer Funktion erstelle, werden die StyleSheets nicht angewendet.

Habt Ihr eine Idee, weshalb das so ist?

Ich poste mal den Code:

Zunächst der CSS-Bereich (befindet sich im HEAD:

  
<style type="text/css">  
table { border-collapse: collapse; }  
td { text-align: center; width: 20px; border: 1px solid;}  
td.kopf { background: #000000; color: #ffffff; font-weight: bold; }  
</style>  

Hier der Codee, der funktioniert:

  
<script type="text/javascript">  
	document.write("<table>");  
	document.write("<tr><td class='kopf'>&nbsp;</td>");  
	for (i=1; i<=10; i++) {  
		document.write("<td class='kopf'>" + i + "</td>");  
	}  
	for (i=1; i<=10; i++) {  
		document.write("<tr><td class='kopf'>" + i + "</td>");  
		for (j=1; j<=10; j++) {  
			document.write("<td>" + i*j + "</td>");  
		}  
		document.write("</tr>");  
	}  
	document.write("</table>");  
</script>  

Und Hier der Codee, der NICHT funktioniert: Ich rufe die Funktion mit einem onload im BODY auf...

  
<script type="text/javascript">  
function tabelle() {  
	document.write("<table>");  
	document.write("<tr><td class='kopf'>&nbsp;</td>");  
	for (i=1; i<=10; i++) {  
		document.write("<td class='kopf'>" + i + "</td>");  
	}  
	for (i=1; i<=10; i++) {  
		document.write("<tr><td class='kopf'>" + i + "</td>");  
		for (j=1; j<=10; j++) {  
			document.write("<td>" + i*j + "</td>");  
		}  
		document.write("</tr>");  
	}  
	document.write("</table>");  
}	  
</script>  

Im ersten Beispiel wird die Tabelle schön formatiert, im zweiten wird sie nicht formatiert...

Weiß jemand, was ich falsch gemacht habe?

Viele Grüße
Tucklemuck

[Cheatah]

Hi,

Und Hier der Codee, der NICHT funktioniert: Ich rufe die Funktion mit einem onload im BODY auf...

wenn onload feuert, ist das Dokument abgeschlossen und kann nicht mehr weiter beschrieben werden. Der Versuch führt notwendigerweise dazu, dass das bestehende Dokument vernichtet und ein neues geöffnet wird. Dies hat natürlich keinerlei Stylesheets.

document.write("<tr><td class='kopf'>&nbsp;</td>");

Übrigens gibt es in Tabellen für "kopf" die Elemente <thead> und <th>.

Weiß jemand, was ich falsch gemacht habe?

Du benutzt document.write() anstelle von DOM-Operationen.

Cheatah

[Tucklemuck]

Hi Cheatah,

vielen Dank für Deine Antwort

wenn onload feuert, ist das Dokument abgeschlossen und kann nicht mehr weiter beschrieben werden. Der Versuch führt notwendigerweise dazu, dass das bestehende Dokument vernichtet und ein neues geöffnet wird. Dies hat natürlich keinerlei Stylesheets.

Oh, das war mir nicht bewusst, dann ist es klar, dass es nicht so funktionieren kann, wie ich wollte.

document.write("<tr><td class='kopf'>&nbsp;</td>");  

Übrigens gibt es in Tabellen für "kopf" die Elemente <thead> und <th>.

Das wusste ich, aber ich wollte in der Tabellen nicht nur die erste Zeile anders formatieren, sondern auch die erste Spalte. Daher die class kopf.

Du benutzt document.write() anstelle von DOM-Operationen.

Das ist mir wieder neu (wie eigentlich alles in JS :-) ): In der Referenz steht doch document.write() unter JavaScript/DOM - Objektreferenz...
(<http://de.selfhtml.org/javascript/objekte/document.htm#write@title=Hier der Link zu document.write()>)

Wie könnte man das denn anders lösen?

Sorry, wenn ich jetzt komplett auf dem Schlauch stehe...aber ich lerne die JS-Geschichte erst seit 4 Tagen und mache wahrscheinlich jede Menge großen Mist...

Viele Grüße
Tucklemuck

[JürgenB]

Hallo Tucklemuck,

schau dir mal

http://de.selfhtml.org/javascript/objekte/document.htm#create_element@title=create_element
http://de.selfhtml.org/javascript/objekte/node.htm#append_child@title=append_child

und speziell für Tabellen

http://de.selfhtml.org/javascript/objekte/htmlelemente.htm#table@title=table -> insertRow()
http://de.selfhtml.org/javascript/objekte/htmlelemente.htm#tr@title=tr -> insertCell()

an. Evtl. wäre auch http://de.selfhtml.org/javascript/objekte/all.htm#inner_html@title=innerHTML was für dich.

Gruß, Jürgen

[Gunnar Bittersmann]

@@Tucklemuck:

nuqneH

Übrigens gibt es in Tabellen für "kopf" die Elemente <thead> und <th>.

Das wusste ich, aber ich wollte in der Tabellen nicht nur die erste Zeile anders formatieren, sondern auch die erste Spalte. Daher die class kopf.

Die Klasse "kopf" ist unsinnig. Wie Cheatah schon sagte, ist für Kopfzellen der Elementtyp 'th' angedacht. Spaltenköpfe stehen im 'thead'; Zeilenköpfe im 'tbody':

<table>  
  <thead>  
    <tr>  
      <th/>  
      <th>Spalte 1</th>  
      <th>Spalte 2</th>  
    </tr>  
  </thead>  
  <tbody>  
    <tr>  
      <th>Zeile 1</th>   <!-- nicht 'td' -->  
      <td>Zelle 1 1</td>  
      <td>Zelle 1 2</td>  
    </tr>  
    <tr>  
      <th>Zeile 2</th>   <!-- nicht 'td' -->  
      <td>Zelle 2 1</td>  
      <td>Zelle 2 2</td>  
    </tr>  
  </tbody>  
</table>

Dann kannst im Stylesheet du alle Kopfzellen mit 'th' selektieren oder per Nachfahrenselektor 'thead th' bzw. 'tbody th' Spalten- und Zeilenköpfe getrennt.

Qapla'

[Tucklemuck]

Hallo zusammen,

vielen Dank für Eure Antworten und die Links!

Ich habe jetzt erkannt, dass Socrates damals Recht hatte (scio nescio). Ich muss wirklich noch viel lernen, aber das macht ja auch Spaß!

Ich lese mich jetzt erst mal ein paar Jahre ein und melde mich dann wieder...:-)

Nochmals danke und viele Grüße
Tucklemuck