Tablle mit dom erweitern...

D

Darian

Erfahrenes Mitglied
Hallo Leute,

natürlich gibt es dazu schon einige Quellen im Netz, die mir auch sicher weiter geholfen haben.

Ich hätte jetzt aber noch zwei spezielle Fragen zu meinem DOM Erstlingswerk.

Wieso gibt er bei mir hier nicht 3 aus statt 2, weil es sind ja 3 Kinderelemente von <table> nämlich => 3 x tr

Ich weiß, es ist nicht schön gemacht so, aber es müßte doch trotzdem gehen wenn ich da jetzt alles richtig verstanden habe.

Wieso gibt er nicht die erste Zelle von der Tabelle aus

HTML: 
<html>
<head>
<title>Test</title>

<script type="text/javascript">
function attach() {
	name = document.einfuegen.name.value;
	bereich = document.einfuegen.bereich.value;
	//Warum ist das 2, obwohl er 3 tr haben sollte?
	anzahl_elemente = document.getElementById("personen").childNodes.length;
	alert(anzahl_element)
	
	//Wieso gibt er da nicht "Name" aus?   personen=>tr=>th=>Textelement und Ausgabe (3x firstChild)
	alert(document.getElementById("personen").firstChild.firstChild.firstChild.nodeValue);
}
</script>

</head>
<body>

<table id="personen" border="1">
	<tr>
		<th>Name</th>
		<th>Bereich</th>
	</tr>
	<tr>
		<td>Chef</td>
		<td>Multimedia Genie</td>
	</tr>
	<tr>
		<td>Coder</td>
		<td>alles könner</td>
	</tr>
</table>

<br>
<form name="einfuegen">
	<input type="text" value="Name" name="name">
	<input type="text" value="Bereich" name="bereich">
	<input type="button" onclick="attach()" value="Anhängen">
</form>
</body>
</html>

Möchte einfach nur um das mit dem anhängen von Knoten..usw zu verstehen und zu Testen, dieses kleine Programm fertig stellen. Es soll einfach nur das was in den Textzeilen steht angehängt werden.

lg und danke für eventuelle Infos
Darian

<edit>Sorry, den Titel kann ich jetzt nicht mehr korrigieren, habe ich total übersehen,</edit>
 
Zuletzt bearbeitet:
Moin,

ums gleich eingangs zu sagen: DOM und Tabellen ist doof :suspekt:

Warum, das siehst du, wenn du dir per JS mal das innerHTML des <body> ausgeben lässt.

Im Mozilla hat deine Tabelle 2 Kindknoten:
1. Die Leerzeichen zwischen <table> und dem 1. <tr>
2. ein <tbody>-Element

Im IE ist es nur einer....ein <tbody>-Element :-)

Du musst in deinem Beispiel also erstmal, wenn du etwas browserübergreifend in die Tabelle einfügen willst, dies in diesem <tbody>-Element tun.

Wenn du auf die Kindknoten des <tbody> zugreifen willst(<tr>)...musst du dabei die Leerzeichen übergehen, denn auch diese stellen je nach Browser einen Knoten dar.


Diese Probleme hast du nicht mit den JS-Methoden- und Objekten für Tabellen(rows, cells, insertRow(), insertCell() etc), aber das ist ja kein DOM.
 
Hallo,

also da höre ich jetzt einige Sachen die mir nicht klar sind.

Ich habe zwar schon einmal was gelesen davon, aber wieso stellen Leerzeichen einen Knoten dar, wäre das nicht irgendwie unlogisch?

Gibt es dazu bitte einen brauchbaren Link, um das besser zu begreifen, insbesondere mit den verschiedenen Browsern?

Stimmt, wenn ich es mit innerHTML ausgebe, steht da auch automatisch ein tbody.

Ich werde es lieber mal mit den Methoden probieren, schließlich sind sie dafür ja da.

Danke für die Infos
Darian
 
Zuletzt bearbeitet:
Darian hat gesagt.:
Ich habe zwar schon einmal was gelesen davon, aber wieso stellen Leerzeichen einen Knoten dar, wäre das nicht irgendwie unlogisch?
Zum Vergrößern anklicken....

Naja, unlogisch ist es nicht, es gibt ja nicht nur Elementknoten, sondern auch Textknoten, und ein Leerzeichen ist nicht nichts, sondern ein Leerzeichen.

Einen Link hab ich nicht parat, was die Umsetzung durch die Browser betrifft, das kannst du selbst testen.
Erzeuge ein Element und fülle es mit einem Leerzeichen...wenn es danach einen Kindknoten hat, dann sieht der Browser Leerzeichen als Knoten an:
Code: 
SpaceIsNode=document.createElement('span');
SpaceIsNode.innerHTML=' ';
SpaceIsNode=SpaceIsNode.childNodes.length;
alert('Bei mir werden Leerzeichen '+((SpaceIsNode)?'':'nicht ')+'als Knoten behandelt');
 
Hallo,

habe es jetzt mit Hilfe vom SelfHTML fertig gemacht, leider passiert nichts.

Ich habe die Methoden benutzt.

Desweiteren wäre noch interessant wie ihr an die Fehlersuche geht. Mit PHP kann man das ja super einschränken, und gibt es auch Ausgaben.

Habt ihr da Tools im Browser die euch da helfen?

Ich teste jetzt gerade Firebug und Webdeveloper, waren aber bis jetzt noch eher weniger Hilfreich.

HTML: 
<html>
<head>
<title>Test</title>

<script type="text/javascript">
function attach() {
	
	//Text aus Textfeld auslesen
	var name = document.einfuegen.name.value;
	var bereich = document.einfuegen.bereich.value;
	
	//Neue Zeile erstellen
	var table_row = document.getElementById("personen").insertRow(document.getElementById("personen").rows.length+1);
	
	//2 Elementknoten für die Tabelle erstellen
	var name_cell = document.createElement("td");
	var bereich_cell = document.createElement("td");
	
	//Textknoten für den Text erstellen
	var name_TextNode =  document.createTextNode(name);
	var bereich_TextNode = document.createTextNode(bereich);	
	
	//Textknoten an Elementknoten anhängen
	name_cell.appendChild(name_TextNode);
	bereich_cell.appendChild(bereich_TextNode);
	
	//Die beiden elementknoten an die Zeile anhängen
	table_row.appendChild(name_cell);
	table_row.appendChild(bereich_cell);
	
	//Textfelder leer stellen
	document.einfuegen.name.value = "";
	document.einfuegen.bereich.value = "";
	

	
}
</script>

</head>
<body>

<table id="personen" border="1">
	<tr>
		<th>Name</th>
		<th>Bereich</th>
	</tr>
	<tr>
		<td>Chef</td>
		<td>Multimedia Genie</td>
	</tr>
	<tr>
		<td>Coder</td>
		<td>alles könner</td>
	</tr>
</table>

<br>
<form name="einfuegen">
	<input type="text" value="Name" name="name">
	<input type="text" value="Bereich" name="bereich">
	<input type="button" onclick="attach()" value="Anhängen">
</form>
</body>
</html>

Fehlerausgabe mit FireBug:
Index or size is negative or greater than the allowed amount" code: "1

lg Darian
 
Da ist nur ein klitzekleiner Logik-Fehler drinnen ;)

Code: 
var table_row = document.getElementById("personen").insertRow(document.getElementById("personen").rows.length+1);

Du willst die <tr> am Ende der Tabelle einfügen. insertRow() erwartet als Parameter den Index der <tr>-Auflistung, wo die <tr> eingefügt werden soll...und dieser Index beginnt bei 0.
Du müsstest bei 2 existierenden <tr> also den Index 2 übergeben...du übergibst aber 3(2 exitierende <tr>+1).

Nimm einfach das +1 heraus, und es haut hin :)

Was die Tools bestrifft, Firebug liefert da doch eine aufschlussreiche Fehlermeldung(findest du unter "Console")
Index or size is negative or greater than the allowed amount" code: "1
Zum Vergrößern anklicken....
 
Hallo,

jetzt ist alles klar, verstehe ich sogar :-)

Danke für eure Hilfe, und ich hätte wohl mehr auf die Fehlermeldung schauen müßen.

lg aus Guatemala
Darian
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück