<TD> mit onClick-Event versehen

[Romero]

Hallöchen ihr da draußen,

ich brauch kurz eure Hilfe, wie ich einen onClick in eine TD bringen kann. Stehe da grad irgendwie aufn Schlauch.

Meine dazu erstellte Tabelle sieht wie folgt aus:

			var Tabelle = document.createElement("table");
			Tabelle.className = "Dok_Ausgabe_Tabelle";
			Tabelle.cellspacing = "2px";
			var Tabelle_tbody = document.createElement("tbody");
			Tabelle_tbody.id = "Dok_Ausgabe_Tabelle";
			
			Tabelle.appendChild(Tabelle_tbody);
			document.getElementById("Dok_Ausgabe").appendChild(Tabelle);

			var TR = document.createElement("tr");
			var TD1 = document.createElement("td");
			var TD2 = document.createElement("td");
			var TD3 = document.createElement("td");
			var TD4 = document.createElement("td");
			
			var TR = document.getElementById("Dok_Ausgabe_Tabelle").appendChild( TR );
			var TAB = document.getElementById("Dok_Ausgabe_Tabelle");
			
			var TD1 = TAB.getElementsByTagName("tr")[0].appendChild( TD1 );
			var TD2 = TAB.getElementsByTagName("tr")[0].appendChild( TD2 );
			var TD3 = TAB.getElementsByTagName("tr")[0].appendChild( TD3 );
			var TD4 = TAB.getElementsByTagName("tr")[0].appendChild( TD4 );
			
			var TD1_Text = document.createTextNode("");
			var TD2_Text = document.createTextNode("Name des Dokuments");
			var TD3_Text = document.createTextNode("Beschreibung");
			var TD4_Text = document.createTextNode("");
			
			TD1.appendChild( TD1_Text );
			TD2.appendChild( TD2_Text );
			TD3.appendChild( TD3_Text );
			TD4.appendChild( TD4_Text );
			
			TR.height = "30px";
			TD1.width = "10px";
			TD2.width = "440px";
			TD2.className = "Dok_Ausgabe_Tabelle_TD";
			TD2.align = "center";
			TD3.width = "740px";
			TD3.className = "Dok_Ausgabe_Tabelle_TD";
			TD3.align = "center";
			TD4.width = "10px";

Nun möchte ich die TD2 mit einem onClick-Event versehen. Wie bewerkstelle ich das nochmal genau? Ich habe folgendes versucht:

			TD2.onclick = "test()";

Dazu auch eine

			function test() { alert("test"); };

geschrieben. Aber da brachte er mir, dass das Objekt nicht gefunden wird. Selbst als Variable-definierte-Funktion kein "Erfolg".

Vielen Dank für eure Hilfe(n).

LG Romero

[marctrix]

Hej Romero,

ich brauch kurz eure Hilfe, wie ich einen onClick in eine TD bringen kann. Stehe da grad irgendwie aufn Schlauch.

Meine dazu erstellte Tabelle sieht wie folgt aus:

Mit dem JavaScript kann ich Dir leider nicht helfen, aber mir fallen ein paar Sachen in Deinem HTML auf (dein eigentliches Problem lösen andere sicherlich). Vielleicht hilft dir der eine oder andere Hinweis trotzdem.

			var Tabelle = document.createElement("table");
			Tabelle.className = "Dok_Ausgabe_Tabelle";
			Tabelle.cellspacing = "2px";
			var Tabelle_tbody = document.createElement("tbody");
			Tabelle_tbody.id = "Dok_Ausgabe_Tabelle";

Entweder ist das eine Layout-Tabelle, dann gehört das ´tbody´ nicht rein - oder es ist eine Daten-Tabelle, dann fehlen ´thead´ und evt. ´tfoot´ und vor allem ´th´, eventuell noch ´scope´.

´cellspacing´ gehört ins (zentrale) Stylesheet-Dokument.

Die ´id´ ist womöglich überflüssig. - Noch mal drüber nachdenken...

			
			var TD1_Text = document.createTextNode("");
			var TD2_Text = document.createTextNode("Name des Dokuments");
			var TD3_Text = document.createTextNode("Beschreibung");
			var TD4_Text = document.createTextNode("");

Also eine Daten-Tabelle. Das alles müsste in ´th´...

			
			TR.height = "30px";
			TD1.width = "10px";
			TD2.width = "440px";

			TD2.className = "Dok_Ausgabe_Tabelle_TD";
			TD2.align = "center";
			TD3.width = "740px";
			TD3.className = "Dok_Ausgabe_Tabelle_TD";
			TD3.align = "center";
			TD4.width = "10px";

Seltsame Klassen-Namen - aber wenn du schon welche vergibst: Formatierung gehört ins CSS...

Pixel-Angaben sind eine Sackgasse...

Marc

[dedlfix]

Tach!

Mit dem JavaScript kann ich Dir leider nicht helfen,

Man nehme eine Funktionsreferenz (also den Namen der Funktion, ohne die aufrufenden Klammern) und übergebe diese anstatt eines Strings.

Entweder ist das eine Layout-Tabelle, dann gehört das ´tbody´ nicht rein -

Jede Tabelle hat mindestens ein tbody-Element. Das ist immer da, auch wenn man es nicht selbst hinzufügt, und muss in Javascript berücksichtigt werden.

dedlfix.

[Romero]

Hy dedlfix

Man nehme eine Funktionsreferenz (also den Namen der Funktion, ohne die aufrufenden Klammern) und übergebe diese anstatt eines Strings.

Hast du da ein kurzes Bsp.? Weil das versuch ich grad (irgendwie). Aber hab da wahrscheinlich die "genaue" Deklaration nicht im Kopf :/

Jede Tabelle hat mindestens ein tbody-Element. Das ist immer da, auch wenn man es nicht selbst hinzufügt, und muss in Javascript berücksichtigt werden.

...war ich also doch nicht so doof, wie ich dachte :)

[dedlfix]

Tach!

Man nehme eine Funktionsreferenz (also den Namen der Funktion, ohne die aufrufenden Klammern) und übergebe diese anstatt eines Strings.

Hast du da ein kurzes Bsp.? Weil das versuch ich grad (irgendwie). Aber hab da wahrscheinlich die "genaue" Deklaration nicht im Kopf :/

Du musst es genauso machen, wie ich das schrieb: nicht als String, nur den Funktionsnamen ohne Klammern. Das ist dann eine Funktionsreferenz, im Gegensatz zu einem Funktionsaufruf mit Klammern.

dedlfix.

[Romero]

hy dedlfix

also wenn ich z.B.

var test = function() { alert("Ausgabe"); };
TD2.onclick = test;

verwende, wie oben geschrieben, passiert nix, wenn ich auf/in die Zeile klicke. Das selbe "Nix" passiert, wenn ich folgendes definiere ('test' wäre hierbei 'undefined'):

Egal ob so...

TD2.onclick = "test";
function test() { alert("Ausgabe"); );

...oder so:

var test = function() { alert("Ausgabe"); );
TD2.onclick = "test";

Daher die Frage, nach einem Beispiel, wie du es meinst. Sorry :/

LG Romero

[dedlfix]

Tach!

also wenn ich z.B.

var test = function() { alert("Ausgabe"); };
TD2.onclick = test;

verwende, wie oben geschrieben, passiert nix, wenn ich auf/in die Zeile klicke.

Dann ist irgendwas anderes falsch. Die Browser-Konsole hast du aber offen, um eventuelle Fehlermeldungen angezeigt zu bekommen?

dedlfix.

[Romero]

Grüßle,

Dann ist irgendwas anderes falsch. Die Browser-Konsole hast du aber offen, um eventuelle Fehlermeldungen angezeigt zu bekommen?

Nicht direkt, da es eine HTA-Datei ist und ich sie so nicht direkt über einen Browser anspreche.

Aber nachdem ich es als eine HTML-Datei abgespeichert habe, bringt er mir, dass 'test' undefiniert sei. Egal ob mit TD2.onclick = "test" oder TD2.onclick = test.

LG Romero

[dedlfix]

Tach!

Aber nachdem ich es als eine HTML-Datei abgespeichert habe, bringt er mir, dass 'test' undefiniert sei. Egal ob mit TD2.onclick = "test" oder TD2.onclick = test.

Die Variante mit Anführungszeichen ist komplett falsch. Die kannst du bei weiteren Tests auslassen. onclick möchte eine Funktionsreferenz und keinen String haben.

Wenn test nicht definiert ist, dann ist es zu dem Zeitpunkt also noch nicht definiert.

Es gibt einen Unterschied zwischen

function test() {...}

und

var test = function () {...};

Ersteres steht immer zur Verfügung nachdem der Code geparst wurde, letzteres nur wenn die Ausführung an der Stelle vorbeikam. Und eine Frage des Scopes ist es in beiden Varianten.

dedlfix.

[Romero]

Hy Marc,

Entweder ist das eine Layout-Tabelle, dann gehört das ´tbody´ nicht rein - oder es ist eine Daten-Tabelle, dann fehlen ´thead´ und evt. ´tfoot´ und vor allem ´th´, eventuell noch ´scope´.

´cellspacing´ gehört ins (zentrale) Stylesheet-Dokument.

Die ´id´ ist womöglich überflüssig. - Noch mal drüber nachdenken...

Ist ne Daten-Tabelle. Die ID brauche ich aber, um sie anzusprechen. Aber werde sie direkt in die <TABLE> schreiben.

			
			var TD1_Text = document.createTextNode("");
			var TD2_Text = document.createTextNode("Name des Dokuments");
			var TD3_Text = document.createTextNode("Beschreibung");
			var TD4_Text = document.createTextNode("");

Also eine Daten-Tabelle. Das alles müsste in ´th´...

Ist da aber TD nicht genauso "gut"?

Seltsame Klassen-Namen - aber wenn du schon welche vergibst: Formatierung gehört ins CSS...

Stimmt :)

Pixel-Angaben sind eine Sackgasse...

... weil die Angaben (z.B. 2) generell als Pixel angegeben sind?

LG Romero

[marctrix]

Hej Romero,

Entweder ist das eine Layout-Tabelle, dann gehört das tbody nicht rein - oder es ist eine Daten-Tabelle, dann fehlen thead und evt. tfoot und vor allem th, eventuell noch scope.

´cellspacing´ gehört ins (zentrale) Stylesheet-Dokument.

Die ´id´ ist womöglich überflüssig. - Noch mal drüber nachdenken...

Ist ne Daten-Tabelle. Die ID brauche ich aber, um sie anzusprechen. Aber werde sie direkt in die <TABLE> schreiben.

Dann auch thead und th.

			
			var TD1_Text = document.createTextNode("");
			var TD2_Text = document.createTextNode("Name des Dokuments");
			var TD3_Text = document.createTextNode("Beschreibung");
			var TD4_Text = document.createTextNode("");

Also eine Daten-Tabelle. Das alles müsste in th...

Ist da aber TD nicht genauso "gut"?

td steht nicht für rechteckiges Dingens, sondern für tabellarisches Datum ;-)

th steht für ´table heading´ und wird für Spaltenüberschriften oder Zeilenüberschriften verwendet.

Sind es - wie in Deinem Fall - Spaltenüberschriften, ist weiter nichts nötig, weil das der Standard ist (siehe auch http://www.barrierefreies-webdesign.de/knowhow/datentabellen/scope.html).

Pixel-Angaben sind eine Sackgasse...

... weil die Angaben (z.B. 2) generell als Pixel angegeben sind?

Nein, weil eine Webseite kein Blatt Papier mit festen Dimensionen ist. Sie soll auf allen Bildschirmen und auch ohne Bildschirm (vorgelesen) funktionieren. ;-)

Marc

[Romero]

Hy Marc,

ich werde deine Sichtweise beherzigen. Und versteh, was du mir sagen möchtest. Für einen richtigen "tabellarischen Aufbau", solle/müsste ich diese TH's, THEAD's, etc. ebenfalls deklarieren, auch, wenn es mit TR und TD's auch funktionierte :) (in meinem Falle).

Danke dennoch für deinen Ansatz :)

LG Romero

[marctrix]

Hej Romero,

ich werde deine Sichtweise beherzigen. Und versteh, was du mir sagen möchtest. Für einen richtigen "tabellarischen Aufbau", solle/müsste ich diese TH's, THEAD's, etc. ebenfalls deklarieren, auch, wenn es mit TR und TD's auch funktionierte :) (in meinem Falle).

Weil Du offenbar gesund bist. Mit inklusivem Design erreicht man erheblich mehr Menschen. In Deutschland hat mehr als ein achtel eine staatlich anerkannte Behinderung.

Ein achtel seiner Kundschaft lässt man nicht gerne unbeachtet. ;-) - Abgesehen davon, dass inklusives Design Vorteile für alle hat. zum Beispiel Wahlmöglichkeiten. Man kann eine Webseite dann mit Maus oder Tastatur bedienen und selber lesen oder sich vorlesen lassen.

Solche Seiten machen schon sehr(!) viel Spaß. Auch wenn man nicht drauf angewiesen ist.

Danke dennoch für deinen Ansatz :)

Gern geschehen. Freut mich, dass du es so siehst!

Marc

[Gunnar Bittersmann]

@@marctrix

Abgesehen davon, dass inklusives Design Vorteile für alle hat. zum Beispiel Wahlmöglichkeiten. Man kann eine Webseite dann mit Maus oder Tastatur bedienen und selber lesen oder sich vorlesen lassen.

“Everybody is a keyboard user when eating lunch with their mouse hand.” —Adrian Roselli

Schön, dass du drauf hinweist. Aber den Wald hast du vor lauter Bäumen nicht gesehen?

LLAP 🖖

[marctrix]

Hej Gunnar,

@@marctrix

Abgesehen davon, dass inklusives Design Vorteile für alle hat. zum Beispiel Wahlmöglichkeiten. Man kann eine Webseite dann mit Maus oder Tastatur bedienen und selber lesen oder sich vorlesen lassen.

“Everybody is a keyboard user when eating lunch with their mouse hand.” —Adrian Roselli

Bei mir ist es in der Regel das Frühstück :-)

Schön, dass du drauf hinweist. Aber den Wald hast du vor lauter Bäumen nicht gesehen?

Tatsächlich doch - habe mich aber von den Bäumen ablenken lassen... - wollte das unbedingt noch geschrieben haben :-}

Marc

[Gunnar Bittersmann]

@@marctrix

Entweder ist das eine Layout-Tabelle, dann gehört das ´tbody´ nicht rein

?? Jedes table-Element enthält (im DOM) mindestens einen tbody – ob du dafür die optionalen Tags im HTML notierst oder nicht.

Ich halte es für „sauberer“, optionale Tags nicht wegzulassen, also immer auch <tbody/</tbody> ins Markup zu schreiben.

oder es ist eine Daten-Tabelle, dann fehlen ´thead´ und evt. ´tfoot´ und vor allem ´th´, eventuell noch ´scope´.

Und es gibt sicher auch Datentabellen, in denen die Zellen einer (der ersten?) Spalte nicht unbedingt Zeilenkopfzellen sind. Oder die vielleicht auch gar keine Spaltenköpfe haben.

LLAP 🖖

[Gunnar Bittersmann]

@@Romero

ich brauch kurz eure Hilfe, wie ich einen onClick in eine TD bringen kann.

Am besten gar nicht!

Genauer: Den click-Eventhandler nicht fürs td-Element, sondern für ein Element darin, und zwar für eins, das von Natur aus ein interaktives Element ist: button.

Also: <td><button onclick="…">…</button></td>^[1]

td-Elemente sind von Natur aus nicht interaktiv – sie mögen mit click clickbar sein, aber nicht bedienbar – nicht per Tastatur. Dazu bedürfte es u.a. des tabindex="0"-Attributs.

Léonie Watson zeigt in ARIA, accessibility APIs & coding like you give a damn! (Video, Folien), wie aufwändig es ist, aus einem beliebigen Element ein interaktives zu machen, das nicht nur mit der Maus, sondern auch per Tastatursteuerung bedienbar ist, und assistive Technologie (wie Screenreader) dem Nutzer auch mitgeteilt, dass es sich dabei um ein UI-Element mit einer bestimmten Funktion handelt.

TL;DR: Nicht machen. button verwenden!

Nachtrag: Den Button kann man natürlich so stylen, dass er weder Rahmen noch Hintergrund hat.

LLAP 🖖

---

1. Dass Eventhandler nicht ins Markup geschrieben, sondern im JavaScript registriert werden sollten (addEventListener()), ist nochmal ein anderes Thema. ↩︎

[Gunnar Bittersmann]

@@Gunnar Bittersmann

sie mögen mit click clickbar sein, aber nicht bedienbar

Die Fehlerkonsole sollte bei der Registrierung von click-Events für andere Elemente als a oder button ohne tabindex-Attribut eine Warnung ausgeben.

LLAP 🖖

[dedlfix]

Tach!

Die Fehlerkonsole sollte bei der Registrierung von click-Events für andere Elemente als a oder button ohne tabindex-Attribut eine Warnung ausgeben.

Auf dass man keine gemeinsamen Eventhandler in übergeordneten Elementen angeben darf und stattdessen jedes einzeln versorgen muss? Gute Idee, nicht.

dedlfix.

[Gunnar Bittersmann]

@@dedlfix

Die Fehlerkonsole sollte bei der Registrierung von click-Events für andere Elemente als a oder button ohne tabindex-Attribut eine Warnung ausgeben.

Auf dass man keine gemeinsamen Eventhandler in übergeordneten Elementen angeben darf und stattdessen jedes einzeln versorgen muss? Gute Idee, nicht.

1. Haste auch wieder recht. Aber:
2. Ich sagte „Warnung“, nicht „Fehler“.

LLAP 🖖

[Romero]

Hy Gunnar

ich brauch kurz eure Hilfe, wie ich einen onClick in eine TD bringen kann.

Am besten gar nicht!

Schade :(

Genauer: Den click-Eventhandler nicht fürs td-Element, sondern für ein Element darin, und zwar für eins, das von Natur aus ein interaktives Element ist: button.

Also: <td><button onclick="…">…</button></td>^[1]

td-Elemente sind von Natur aus nicht interaktiv – sie mögen mit click clickbar sein, aber nicht bedienbar – nicht per Tastatur. Dazu bedürfte es u.a. des tabindex="0"-Attributs.

TL;DR: Nicht machen. button verwenden!

Nachtrag: Den Button kann man natürlich so stylen, dass er weder Rahmen noch Hintergrund hat.

Wird mir hier nichts anderes übrig bleiben, als mit einem Button diese Zelle zu versehen. Aber ich wollte halt eben nicht, dass ein Button (das Klicken sichtbar, das Loslassen sichtbar) Verwendung findet. Aber nix desto trotz, werden ich es mit dem besagtem Button versuchen.

LG Romero

---

1. Dass Eventhandler nicht ins Markup geschrieben, sondern im JavaScript registriert werden sollten (addEventListener()), ist nochmal ein anderes Thema. ↩︎

[JürgenB]

Hallo Romero,

Nachtrag: Den Button kann man natürlich so stylen, dass er weder Rahmen noch Hintergrund hat.

Wird mir hier nichts anderes übrig bleiben, als mit einem Button diese Zelle zu versehen. Aber ich wollte halt eben nicht, dass ein Button (das Klicken sichtbar, das Loslassen sichtbar) Verwendung findet. Aber nix desto trotz, werden ich es mit dem besagtem Button versuchen.

in diesem Wiki-Artikel wird (u.A.) ein Tabellenfeld mit einem Button klickbar gemacht.

Gruß
Jürgen

[dedlfix]

Tach!

Wird mir hier nichts anderes übrig bleiben, als mit einem Button diese Zelle zu versehen.

Der Button wird dein Problem nicht lösen. Der Button ist lediglich eine Frage der Bedienbarkeit und nicht eine des funktionierenden Zuweisens eines Event-Handlers.

dedlfix.

[Gunnar Bittersmann]

@@dedlfix

Wird mir hier nichts anderes übrig bleiben, als mit einem Button diese Zelle zu versehen.

Der Button wird dein Problem nicht lösen. Der Button ist lediglich eine Frage der Bedienbarkeit und nicht eine des funktionierenden Zuweisens eines Event-Handlers.

Das ist richtig, aber keine gute Antwort auf „Wird mir hier nichts anderes übrig bleiben“.

Und in deinem Satz ist ein „lediglich“ zu viel.

LLAP 🖖

[Romero]

Hallöchen nochmal,

ich habe folgendes deklariert (ich habe es schon in eines meiner anderen Scripte, aber da funktionierte es wundervoll, nur leider hier nicht).

			var TR_Doks = document.createElement("tr");
			var TD_Doks_1 = document.createElement("td");
			var TD_Doks_2 = document.createElement("td");
			
			var TR_Doks = document.getElementById("Dok_Ausgabe_Tabelle").appendChild(TR_Doks);
			var TAB_Doks = document.getElementById("Dok_Ausgabe_Tabelle");
			
			var TD_Doks_1 = TAB_Doks.getElementsByTagName("tr")[0].appendChild(TD_Doks_1);
			var TD_Doks_2 = TAB_Doks.getElementsByTagName("tr")[0].appendChild(TD_Doks_2);
			
			var TD_Doks_1_Text = document.createTextNode("");
			var TD_Doks_2_Text = document.createTextNode("");
			
			var INPUT = document.createElement("input");
			INPUT.type = "button";
			INPUT.value = "test";
			INPUT.className = "Dok_Ausgabe_Tabelle_BUTTON";
			
			TD_Doks_1.appendChild(TD_Doks_1_Text);
			TD_Doks_2.appendChild(TD_Doks_2_Text);
			
			TD_Doks_2.appendChild(INPUT);
			
			TR_Doks.height = "30px";
			TD_Doks_1.width = "10px";
			TD_Doks_2.width = "440px";
			TD_Doks_2.className = "Dok_Ausgabe_Tabelle_TD1";
			
			
			function huhu(abc) { return function() {alert(abc); //==> hier sollte nun beim Klicken auf den Button, die Variable 'abc' ausgegeben werden, was leider nicht tut }; };
			
			var a = document.getElementById("Dok_Ausgabe_Tabelle").getElementsByTagName("tr");
			for( var j = 0; j < a.length; j++ )
			{
				var b = a[j].getElementsByTagName("input");
				
				if(b.length == 1)
				{
					alert(j)
					for( var i = 0; i < b.length; i++)
					{
						var c = b[i];
						c.onclick = huhu(i);
					};
				};
			};

Wo liegt hier nun der Fehler? Verzweifle noch :/

LG Romero

[dedlfix]

Tach!

Wo liegt hier nun der Fehler? Verzweifle noch :/

Vor dem Verzweifeln sollte man noch Debugging durchführen. Neben Fehlermeldungen in der Console (wenn keine zu sehen sind, dann sag das bitte, damit man da nicht immer nachfragen muss) kann man auch Breakpoints setzen, um zu schauen, ob bestimmte Codeteile angesprungen werden. Bitte untersuch erstmal, was genau stattfindet und was nicht. Wenn HTA dabei im Weg steht, dann bau das doch erstmel soweit es geht in einer normalen Umgebung auf. Aussagekräftigere Variablennamen als a, b, c sind für die Lesbarkeit auch von Vorteil, genauso wie das Herunterbrechen von Code in kleiner Einheiten anstelle einer Monsterfunktion.

dedlfix.

[Romero]

Tach auch,

Vor dem Verzweifeln sollte man noch Debugging durchführen. Neben Fehlermeldungen in der Console (wenn keine zu sehen sind, dann sag das bitte, damit man da nicht immer nachfragen muss) kann man auch Breakpoints setzen, um zu schauen, ob bestimmte Codeteile angesprungen werden. Bitte untersuch erstmal, was genau stattfindet und was nicht. Wenn HTA dabei im Weg steht, dann bau das doch erstmel soweit es geht in einer normalen Umgebung auf. Aussagekräftigere Variablennamen als a, b, c sind für die Lesbarkeit auch von Vorteil, genauso wie das Herunterbrechen von Code in kleiner Einheiten anstelle einer Monsterfunktion.

ich habe die Datei in HTML abgespeichert und durch die Fehlerkonsole des IE's gejagt. Dabei wurde mir kein Scriptfehler angezeigt.

Ok, hier mein reduzierter Code, wo ich versuche, ein onclick auf ein Button innerhalb einer TD, zu setzen.

function Start()
{
	//==> hier wird die Tabelle aufgebaut
	//==> z.B. TD's mit INPUT-Button
	
	function Klicker(Nummer) { return function() {alert(Nummer); }; };
	
	var TRs_in_meiner_Tabelle = document.getElementById("Dok_Ausgabe_Tabelle").getElementsByTagName("tr");
	for( var j = 0; j < TRs_in_meiner_Tabelle.length; j++ )
	{
		var INPUT_in_der_TR = TRs_in_meiner_Tabelle[j].getElementsByTagName("input");
		
		if(INPUT_in_der_TR.length == 1)
		{
			for( var i = 0; i < INPUT_in_der_TR.length; i++)
			{
				var INPUT_Klick = INPUT_in_der_TR[i];
				alert(INPUT_Klick.value) //==> Value wird richtig ausgegeben
				INPUT_Klick.onclick = Klicker(i);
			};
		};
	};
};

Ich kann auf den Button (Value) zugreifen. Wird aber sofort nach dem Tabellenaufbau aufgerufen. Klicke ich aber nun auf den Button, soll er die interne TR-Nummer anzeigen (in welcher Zeile das Input vorhanden ist).

LG Romero

[dedlfix]

Tach!

Klicke ich aber nun auf den Button, soll er die interne TR-Nummer anzeigen (in welcher Zeile das Input vorhanden ist).

Das passiert auch.

dedlfix.

[Romero]

Ich hab die Lösung gefunden, warum es nicht funktionierte, warum kein Click-Event stattfand, obwohl ich es eigentlich (aus einem anderen Script) klappen müsste.

An der Stelle, wo die Tabelle erscheinen soll, hab ich folgendes deklariert:

document.getElementById("Dok_Ausgabe").innerHTML = '...';
			
//-------------------------------//
//-- Tabellen-Gerüst erstellen --//
//-------------------------------//
var Tabelle = document.createElement("table");
Tabelle.className = "Dok_Ausgabe_Tabelle1";
var Tabelle_tbody = document.createElement("tbody");
Tabelle_tbody.id = "Dok_Ausgabe_Tabelle";
Tabelle.appendChild(Tabelle_tbody);
document.getElementById("Dok_Ausgabe").appendChild(Tabelle);

var TR_Kopf = document.createElement("tr");
var TD_Kopf_1 = document.createElement("td");
... //=> weiterer Aufbau der Tabelle

function test() { return function() { alert("gib mir was aus!"); }; };

var TR_in_Tabelle = document.getElementById("Dok_Ausgabe_Tabelle").getElementsByTagName("tr");
for( var i = 0; i < TR_in_Tabelle.length; i++ )
{
	var INPUT_in_TR = TR_in_Tabelle[i].getElementsByTagName("input");
	for( var j = 0; j < INPUT_in_TR.length; j++ ) { var INPUT_Klick = INPUT_in_TR[j]; INPUT_Klick.onclick = test(); };
};

document.getElementById("Dok_Ausgabe").innerHTML += '...';

Ich habe dann alles in der Ober-Funktion auskommentiert, was nicht direkt mit der Tabelle in zusammenhang stand, um nur rein die Funktionalität zu prüfen. Und da habe ich festgestellt, dass das untere

document.getElementById("Dok_Ausgabe").innerHTML += '...';

für das Nicht-Ausführen der Funktion test() ist, bzw. beim Klick auf den Button, da nicht das alert() angezeigt wird.

Nun habe ich es ein wenig umgebaut, und es sieht nun wie folgt aus (was nun erfolgreich funktioniert):

document.getElementById("Dok_Ausgabe").innerHTML = '...';
			
//-------------------------------//
//-- Tabellen-Gerüst erstellen --//
//-------------------------------//
var Tabelle = document.createElement("table");
Tabelle.className = "Dok_Ausgabe_Tabelle1";
var Tabelle_tbody = document.createElement("tbody");
Tabelle_tbody.id = "Dok_Ausgabe_Tabelle";
Tabelle.appendChild(Tabelle_tbody);
document.getElementById("Dok_Ausgabe").appendChild(Tabelle);

document.getElementById("Dok_Ausgabe").innerHTML += '...'; //=> das war in meinem Falle der "Störenfried", der mich verzweifeln lies

//===> ab hier erfolgt der Aufbau der Spalten/Zeilen und der weiteren Funktionen
var TR_Kopf = document.createElement("tr");
var TD_Kopf_1 = document.createElement("td");
... //=> weiterer Aufbau der Tabelle

function test() { return function() { alert("gib mir was aus!"); }; };

var TR_in_Tabelle = document.getElementById("Dok_Ausgabe_Tabelle").getElementsByTagName("tr");
for( var i = 0; i < TR_in_Tabelle.length; i++ )
{
	var INPUT_in_TR = TR_in_Tabelle[i].getElementsByTagName("input");
	for( var j = 0; j < INPUT_in_TR.length; j++ ) { var INPUT_Klick = INPUT_in_TR[j]; INPUT_Klick.onclick = test(); };
};

Danke dennoch an Eure Ansätze, und das ich weiterhin immer noch dazulernen kann. Aber: kann mir da jemand erklären, warum es sich so (siehe ersten Script-Auszug) verhielt?

LG Romero

[dedlfix]

Tach!

Aber: kann mir da jemand erklären, warum es sich so (siehe ersten Script-Auszug) verhielt?

document.getElementById("Dok_Ausgabe").innerHTML += '...';

Das führt dazu, dass die im DOM hängenden Kind-Elemente zurückgerechnet werden nach HTML-Code, diesem String dann der neue HTML-Code-String hinzugefügt wird und anschließend dieser Teil des DOM neu erstellt wird. Die Event-Handler gehen dabei offensichtlich flöten.

Besser wäre es sowiesi, wenn den Neuen Teil an den bestehenden anhängst und nicht das gesamte Innere neu erstellst. Dann löst sich sicher auch das Verschwinden des Eventhandlers in Wohlgefallen auf.

dedlfix.