mit js dom td-Elemente hinzufügen

[quezo]

Hi,

ich möchte per JS eine Tabelle um mehrere Zeilen erweitern.
Von der Syntax müsste alles korrekt sein, nur funktioniert's halt irgendwie nicht. Eine Fehlermeldung bekomme ich auch nicht.

Weiß jemand Rat?

Hier die Javascript-Funktion:

function ergaenzen() {
 cellText = new Array("test1", "test2", "test3");
 var strTable = document.getElementById("tabelle");
		
 for(var i=0; i<3; i++) {	
   var strRow = document.createElement("tr");
		
   for(var j=0; j<2; j++) {
      var strCell = document.createElement("td");
      alert(strCell);
	if(j==0) {
	    var text = "::";
	}
	else {
	    var text = cellText[i];
	}
	var strText = document.createTextNode(text);
	strCell = document.appendChild(strText);
	strRow  = document.appendChild(strCell);
   }
   strTable = document.appendChild(strRow);
 }
}

Hier die Tabelle in HTML:

<table border="0" width="150" id="tabelle">
 <tr>
  <td width="15">::</td>
  <td>Suche</td>
 </tr>
</table>

 

[Adam Wille]

Hoi,

wenn der Browser nicht meckert und dennoch nix ausgibt, gibt es afaik nur 2 Erklärungen:

• Das Script ist richtig, kann aber vom Browser nicht ausgeführt werden, da dieser nicht die benötigte Script-Engine besitzt.
• Das Script ist richtig, bewirkt aber rein logisch nichts sichtbares im GUI

Erstere kannst du ja mit der richtigen Browserwahl umgehen, bei zweiterer musst du schon im Script suchen.

Bei deinem Script ist das Problem, dass du zwar alle Elemente und Knoten korrekt erstellst, sie aber unsinnig im Elementbaum plazierst.

Du hängst alle deine Knoten an das document-Objekt an, falls du es noch nicht bemerkt haben solltest.
Der Kontext der appendChild-Methode (das Objekt, in dessen Umgebung die Funktion ausgeführt wird) erhält immer als Kindknoten deine Elemente.
Das document-Objekt kann aber mit <tr>- und <td>-Tags relativ wenig bis gar nichts anfangen.
Es beherbergt dann zwar die Knoten, aber dadurch füllt sich keine Browseroberfläche sichtbar.

Sinn macht die Erstellung der Elemente erst, wenn du die Knoten richtig (hier gemeint ist eher "sinnvoll") miteinander verknüpfst, so dass ein Elementbaum entsteht, der einem validen Aufbau eines HTML-Dokumentes entspricht.

Wende die Methode appendChild() also im richtigen Kontext an und du wirst Erfolg haben.

Im folgenden ein Scriptvorschlag von mir:

<script type="text/javascript" language="JavaScript">
<!--

function ergaenzen() { 
	var cellText = new Array("test1", "test2", "test3");
	var strTable = document.getElementById("tabelle");
	for (var i=0; i<3; i++) {
		var strRow = document.createElement("tr");
		for (var j=0; j<4; j++) {
			if (j == 0) { 
				var text = "::"; 
			} else { 
				var text = cellText[i]; 
			} 
			var strText = document.createTextNode(text);
			var strCell = document.createElement("td");
			strRow.appendChild(strCell).appendChild(strText);
		}
		strTable.appendChild(strRow);
	}
}

//-->
</script>

hth & have a nice day,
Geist

 

[quezo]

hi,

danke für die Antwort. Hab die Funktion entsprechend abgeändert. Allerdings kommt nun die Fehlermeldung:

ReferenceError - Statement on line 1: Reference to undefined variable: No such variable 'ergaenzen'

Ich kann damit jetzt leider recht wenig anfangen. Eine Variable mit diesem Namen brauche ich doch gar nicht.

 

[Adam Wille]

Nunja, eine Funktion ist auch nichts weiter als eine Objekteigenschaft, das Objekt einer globalen Funktion wäre eben das window-Objekt.

Ich kann deine Fehlermeldung jetzt aber nicht in Zusammenhang bringen, in allen tauglichen Browsern wird das Script bei mir fehlerfrei ausgeführt.

Auf welchen Browser beziehst du dich und bist du sicher, dass der Funktionsaufruf stimmt?

Ansonsten wäre Anschauungsmaterial in online-Form nicht schlecht.

Geist

 

[quezo]

also ich habe die Funktion, wie du sie notiert hast, so eingebaut.

Der Funktionsaufruf erfolgt so

<a href="javascript:ergaenzen();">test</a>. Eigentlich müsste es doch funktionieren.

Einzig und allein im Netscape7 funktioniert es tadellos.

Der IE6 bring den Fehler 'Objekt erwartet Zeile 1' und Opera7 bringt folgendes in der Javascript Console:

Unknown context
Syntax error while loading (line 3)
function_ergaenzen() {
----------------------^

beim Laden des html-Files und folgendes beim Klick des Links:

name: ReferenceError
message: Statement on line 1: Reference to undefined variable: No such variable 'ergaenzen'
Backtrace:
In unknown script
ergaenzen();

Weisst Du woran das liegt?

 

[Adam Wille]

Mh, den IE6 habe ich nicht, obwohl er sich bei mir dafür ausgibt, ich habe nur im Mozilla und NN7 getestet, die 7er-Variante der Opera teste ich auch nicht.

Ab nächster Woche wäre ich evtl. aber auch für's testen in den beiden zu haben, vorher komme ich aber nicht an die Browser ran...

Aber folgendes Konstrukt: "function_ergaenzen() { " sieht mir ja arg ulkig aus...wo steht'n das im Quältext drinnen?
Oder werden Scriptfehler immer derart formatiert ausgegeben?

Und keine online-Variante davon vorhanden?

Geist

 

[quezo]

hi,

das mit dem function_ergaenzen... steht so nicht im Quelltext. Ist irgendwie hier hinzugekommen.

Also ich hab's mal online gestellt http://www.demimoranes.de/jstest/

Ich hab nochmal alles durchprobiert, woran es denn liegen könnte. Eigentlich sollte es doch mit den neuesten Browsern funktionieren.