Schleife für creatElement

[James]

Hallooo

Ich bin dabei einer Tabelle in den tds Elemente einzufügen. Die Tabelle wird aus Datenbankdaten zusammengebaut. Das heißt, die Struktur ist immer gleich.

Mein Ansatz:

  
  
var ein = document.getElementById('test').getElementsByTagName('tr');  
  
    var myElement = document.createElement("input");  
    myElement.setAttribute("type", "checkbox");  
    myElement.setAttribute("name", "arrayname[]");  
  
for(i = 1; i < ein.length; i++)  
    {  
        ein[i].getElementsByTagName('td')[3].appendChild(myElement);  
    }

Der Tabellenaufbau:

<table id='test'>  
<tr>  
<th>Übe</th>  
<th>rschr</th>  
<th>ift</th>  
<th>Hier passiert nichts, daher i = 1;</th>  
</tr>  
<tr>  
<td>0</td>  
<td>1</td>  
<td>2</td>  
<td>Hier soll das neue Element rein</td>  
</tr>  
<tr>  
<td>0</td>  
<td>1</td>  
<td>2</td>  
<td>Hier soll das neue Element rein. Letzte Tabellenausgabe</td>  
</tr>  
</table>

Ich lasse das Javascript erst arbeiten, nachdem der DOM Baum aufgebaut ist.

Ich gebe ein.length aus mit alert, ist 12. Aber nur bei der letzten Tabellenausgabe wird das inputfeld angehangen, was ich nicht verstehe.

Wäre jemand so nett mir zu sagen, was ich falsch mache?
Danke!

[JürgenB]

Hallo James,

du musst für jedes Tabellenfeld ein neues input erzeugen.

Gruß
Jürgen

[James]

du musst für jedes Tabellenfeld ein neues input erzeugen.

Hallo Jürgen,

du meinst so als array?

    myElement = new array();  
  
    for(i = 1; i <= ein.length; i++)  
    {  
        myElement[i] = document.createElement("input");  
        myElement[i].setAttribute("type", "checkbox");  
        myElement[i].setAttribute("name", "loeschen[]");  
        ein[i].getElementsByTagName('td')[3].appendChild(myElement[i]);  
    }

Denn das funktioniert für mich immernoch nicht.

[Felix Riesterer]

Lieber James,

probiere doch einmal folgenden Ansatz:

function addCheckboxes (tbl) {  
    var i, input, trs, tds;  
  
    if (!tbl) {  
        alert("Tabelle nicht gefunden!");  
  
    } else {  
  
        trs = tbl.getElementsByTagName("tr");  
  
        for (i = 1; i < trs.length; i++) {  
            tds = trs[i].getElementsByTagName("td");  
  
            if (tds.length > 0) {  
                input = document.createElement("input");  
                input.type = "checkbox";  
                input.name = "arrayname[]";  
  
                tds[tds.length -1].appendChild(input);  
            }  
        }  
    }  
}  
  
addCheckboxes(document.getElementById("test"));

Liebe Grüße,

Felix Riesterer.

[James]

probiere doch einmal folgenden Ansatz:
Felix Riesterer.

Hallo Felix.

Es hat geklappt und habe es auch verstanden. Doch jetzt stehe ich vor einem anderen Problem. Dem th Element habe ich auch ein weiteres Kind gegeben, dass alle Kids selektieren soll. Doch es funktioniert nicht. Die Fehlerkonsole mir jedoch "funktionsname not defined". Habe sogar den Funktionsnamen mit Copy und Paste dahin kopiert falls ich irgendwo verschrieben habe.

function functionsname()  
{  
    var Markieren;  
	var Boxen = document.getElementsByName('arrayname[]');  
	if(null != Boxen)  
	{  
	    if(document.getElementById('AlleMarkieren').checked) { Markieren = true; } else { Markieren = false; }  
	for(var i = 0; Boxen.length > i; i++)  
	{  
		Boxen[i].checked = Markieren;  
	}  
}  
}

(...)  
allinput.id = "AlleMarkieren";  
allinput.setAttribute("onClick","funktionsname()");  
(...)

Wenn ich statt functionsname ein alert nehme, funktioniert es.

[JürgenB]

Hallo James,

allinput.setAttribute("onClick","funktionsname()");

soweit ich weiß, wird hier nicht der Name, sondern die Funktionsreferenz benötigt:

allinput.setAttribute("onClick",funktionsname);

oder

allinput.onclick = funktionsname;

Gruß, Jürgen

[JürgenB]

Hallo,

function functionsname()

allinput.setAttribute("onClick","funktionsname()");

allinput.setAttribute("onClick",funktionsname);

allinput.onclick = funktionsname;

und natürlich mit "c"!

Gruß, Jürgen

[Der Martin]

Hallo Jürgen,

allinput.setAttribute("onClick","funktionsname()");
soweit ich weiß, wird hier nicht der Name, sondern die Funktionsreferenz benötigt:

im obigen Fall ist das richtig, denn setAttribute() erwartet immer einen String - und wenn man Eventhandler direkt als HTML-Attribut notiert, formuliert man sie ja auch als String.

allinput.setAttribute("onClick",funktionsname);

Das wäre deshalb falsch.

allinput.onclick = funktionsname;

Ja, diese wesentlich einfachere Variante hatte ich auch vorgeschlagen - zwei Minuten später als du. ;-)

Ciao,
 Martin

[JürgenB]

Hallo Martin,

allinput.setAttribute("onClick","funktionsname()");
soweit ich weiß, wird hier nicht der Name, sondern die Funktionsreferenz benötigt:

im obigen Fall ist das richtig, denn setAttribute() erwartet immer einen String - und wenn man Eventhandler direkt als HTML-Attribut notiert, formuliert man sie ja auch als String.

daher "soweit ich weiß" bzw. nicht weiß. Ich benutze setAttribute nicht.

allinput.onclick = funktionsname;

Ja, diese wesentlich einfachere Variante hatte ich auch vorgeschlagen - zwei Minuten später als du. ;-)

aber mit "c" :)

Gruß, Jürgen

[James]

Danke euch beiden!!

es lag nicht an k und c. Ich habs nur falsch umgeschrieben hier im Forum damit eigentlich das Skript und seine Grundfun(ck)tion im Blick bleibt.

Ich habe nun onclick = funktionsname; verwendet, und plötzlich funktioniert es. Verstehe ich das richtig: Wenn ich setAttribute nehme dann darf ich nicht funktionsname() schreiben, sondern muss noch einen Parameter übergeben z.B. funktionsname(parameter) damit es mit setAttribute funktioniert?

Und bei input.onclick, da kann ich sowas wie Parameter überhaupt nicht angeben?

Vielen Dank!

[Der Martin]

Hallo James,

Ich habe nun onclick = funktionsname; verwendet, und plötzlich funktioniert es.

merkwürdig - ich habe immer ein ungutes Gefühl, wenn ein Fehler "plötzlich" weg ist und ich nicht genau weiß, was es war.

Verstehe ich das richtig: Wenn ich setAttribute nehme dann darf ich nicht funktionsname() schreiben, sondern muss noch einen Parameter übergeben z.B. funktionsname(parameter) damit es mit setAttribute funktioniert?

Nein. Das hast du entweder falsch verstanden, oder hier falsch wiedergegeben. Ich hole mal etwas weiter aus.

Es gibt zwei grundsätzlich verschiedene Möglichkeiten, Eventhandler zu definieren:

a) als Attribut eines HTML-Elements:
  <button onclick="alert('Ich bin geklickt worden!')">Klick!</button>
Bei dieser Urform wird der Eventhandler als String angegeben, denn die Werte von HTML-Attribute sind immer Strings. Darin wird Javascript-Code ganz normal geschrieben, so wie man ihn auch in einem separaten Script-Abschnitt schreiben würde.
Intern wird das automatisch in die Form b) umgesetzt.

b) Direkt aus einem Script heraus durch Zuweisung, so wie Jürgen und ich es heute mittag vorgeschlagen haben. Dabei ist zu beachten, was ich schon erwähnte: Man darf keine Klammern mit dem Funktionsnamen notieren, denn das würde die Funktion sofort aufrufen und ihr Ergebnis als Eventhandler zuweisen - man möchte stattdessen aber eine Referenz, einen Verweis auf die Funktion selbst.

Was Jürgen erst vorgeschlagen hat, also mit setAttribute(), entspricht eigentlich der Methode a), weil man quasi den Umweg geht, erst ein HTML-Attribut zu erstellen, und dann darauf zu vertrauen, dass das indirekt in ein entsprechendes Javascript-Objekt umgewandelt wird. Warum das in deinem Fall nicht geklappt hat, ist mir nicht wirklich klar - ich meine, es hätte funktionieren müssen, es war nur unnötig umständlich. Wobei ... ich erinnere mich dumpf, dass der IE mal Probleme damit hatte, habe aber im Moment keine Einzelheiten mehr parat.

Und bei input.onclick, da kann ich sowas wie Parameter überhaupt nicht angeben?

Doch, aber das habe ich bisher verschwiegen, weil deine Funktion so angelegt war, dass sie keine Parameter erwartet. Will man doch welche übergeben, muss man das in eine anonyme Funktion kapseln, beispielsweise so:

myinput.onclick = function(){ alert('Ich bin geklickt worden!'); };

Direkt im Eventhandler steht einem automatisch noch die reservierte Variable this zur Verfügung, die das Element repräsentiert, an das der Eventhandler gekoppelt ist. Man kann so bequem auf alle Eigeschaften des Elements zugreifen, etwa id, value, style und was da sonst noch so kreucht und fleucht.

So long,
 Martin

[Matthias Apsel]

Om nah hoo pez nyeetz, Der Martin!

Was Jürgen erst vorgeschlagen hat, also mit setAttribute(), entspricht eigentlich der Methode a), weil man quasi den Umweg geht, erst ein HTML-Attribut zu erstellen, und dann darauf zu vertrauen, dass das indirekt in ein entsprechendes Javascript-Objekt umgewandelt wird. Warum das in deinem Fall nicht geklappt hat, ist mir nicht wirklich klar - ich meine, es hätte funktionieren müssen, es war nur unnötig umständlich. Wobei ... ich erinnere mich dumpf, dass der IE mal Probleme damit hatte, habe aber im Moment keine Einzelheiten mehr parat.

Beim Erstellen des Scripts für die kontrastreiche Ansicht gab es mit setAttribute auch Probleme. Das Attribut stand zwar im Quelltext, aber das war auch alles.

Matthias

[Der Martin]

Hallo Matthias,

Was Jürgen erst vorgeschlagen hat, also mit setAttribute() [...] hätte funktionieren müssen, es war nur unnötig umständlich. Wobei ... ich erinnere mich dumpf, dass der IE mal Probleme damit hatte, habe aber im Moment keine Einzelheiten mehr parat.
Beim Erstellen des Scripts für die kontrastreiche Ansicht gab es mit setAttribute auch Probleme. Das Attribut stand zwar im Quelltext, aber das war auch alles.

ah, also können wir nach 'Bzb' jetzt auch den IE als alleinige Fehlerquelle ausklammern.

Wäre schön, wenn jemand eine eindeutige Erklärung anbieten könnte. Bis dahin gilt für mich erst recht (und das werde ich auch anderen so weiterempfehlen): Finger weg von setAttribute, verwende lieber eine direkte Zuweisung der Eigenschaft.
Wobei der einfachere und leichter lesbare Code IMO auch schon Grund genug ist.

Schönes Wochenende,
 Martin

[James]

Beim Erstellen des Scripts für die kontrastreiche Ansicht gab es mit setAttribute auch Probleme. Das Attribut stand zwar im Quelltext, aber das war auch alles.
ah, also können wir nach 'Bzb' jetzt auch den IE als alleinige Fehlerquelle ausklammern.

Ja. Teste nur im Firefox aktuell mit der neusten Version. IE ist also ausnahmsweise nicht Schuld. ^^

Wäre schön, wenn jemand eine eindeutige Erklärung anbieten könnte. Bis dahin gilt für mich erst recht (und das werde ich auch anderen so weiterempfehlen): Finger weg von setAttribute, verwende lieber eine direkte Zuweisung der Eigenschaft.

Ich hatte es so in der Selfhtml Dokumentation gelesen und dachte daher das wäre ideal. Wobei ich mir auch die Frage gestellt habe warum es sozusagen zwei Varianten gibt.
Das mit den anonymen Funktionen kannte ich schon. Aber irgendwie war ich zu Blind zu erkennen, dass das der Aufbau von diesen war. Liebe macht blind. :-)

Eine Erklärung wäre optimal. Bis dahin bedanke ich mich für die zahlreichen Hilfestellungen und guten Antworten!

[Matthias Apsel]

Om nah hoo pez nyeetz, Der Martin!

ah, also können wir nach 'Bzb' jetzt auch den IE als alleinige Fehlerquelle ausklammern.

Was ist Bzb?

Matthias

[Der Martin]

Hallo,

ah, also können wir nach 'Bzb' jetzt auch den IE als alleinige Fehlerquelle ausklammern.
Was ist Bzb?

oh, ich habe nicht weiter darüber nachgedacht und war der Meinung, das wäre als Kürzel für eine der häufigsten Fehlerquelle weithin bekannt. Scheint aber doch eher eine lokal begrenzte Verbreitung zu haben ...

"Bediener/Benutzer zu blöd" ;-)

Schönen Sonntag noch,
 Martin

[Matthias Apsel]

Om nah hoo pez nyeetz, Der Martin!

"Bediener/Benutzer zu blöd" ;-)

Ah, danke. Kannte ich tatsächlich nicht.

Matthias

[Der Martin]

Hallo,

Die Fehlerkonsole mir jedoch "funktionsname not defined". Habe sogar den Funktionsnamen mit Copy und Paste dahin kopiert falls ich irgendwo verschrieben habe.

dann tauscht deine Zwischenablage anscheinend manchmal 'k' und 'c' gegeneinander aus:

function functionsname()
allinput.setAttribute("onClick","funktionsname()");

Siehst du den Unterschied?

Davon abgesehen: Warum so umständlich über den Umweg mit setAttribute()? Warum nicht direkt zuweisen?

allinput.onclick = funktionsname;

Beachte, dass hier funktionsname ohne nachfolgende Klammern geschrieben wird, weil ja an dieser Stelle ein Verweis auf die Funktion selbst zugewiesen werden soll, und nicht das Funktionsergebnis.

Ciao,
 Martin

[Felix Riesterer]

Lieber James,

if(document.getElementById('AlleMarkieren').checked) { Markieren = true; } else { Markieren = false; }

das geht eleganter:

Markieren = document.getElementById('AlleMarkieren').checked;

Liebe Grüße,

Felix Riesterer.