Tabellen-zelle dynamisch CSS-Klasse zuweisen

[Andreas Korthaus]

Hallo!

ich nutze folgende Funkiton um eine neue Tabellenzeile mit 1 Spalte in einer Tabelle zu ergänzen:

var Zeile = 1;
function ZeileEinfuegen() {

var TR = document.getElementById("Tabelle").insertRow(Zeile);
 Zeile += 1;
 var TD = document.createElement("td");
 var TDtext = document.createTextNode(document.Formular.linkerText.value);
 TD.appendChild(TDtext);
 TR.appendChild(TD);
 document.Formular.linkerText.value = "";
}

Kann mir jemand sagen wie ich hier noch "mal eben" der Zelle eine CSS-Klasse zuweise, also das da sinngemäß <td class="abc"> stände?

Viele Grüße
Andreas

[Norbert Klein]

Hallo.

Kann mir jemand sagen wie ich hier noch "mal eben" der Zelle eine CSS-Klasse zuweise, also das da sinngemäß <td class="abc"> stände?

Da steht's: http://selfhtml.teamone.de/javascript/objekte/htmlelemente.htm#universaleigenschaften

Und so geht's:

[...]
var TD = document.createElement("td");

TD.className = "abc";

[...]

Gruß
Norbert

[Andreas Korthaus]

Hallo!

Da steht's: http://selfhtml.teamone.de/javascript/objekte/htmlelemente.htm#universaleigenschaften

Und so geht's:

[...]
var TD = document.createElement("td");

TD.className = "abc";

Danke Euch!

Noch eine kleine Frage: Wie kann ich die Anzahl aktuellen der Zeilen ermitteln?

Grüße
andreas

[Herbalizer]

Hi!

Noch eine kleine Frage: Wie kann ich die Anzahl aktuellen der Zeilen ermitteln?

Gehts um die Anzahl der Zeilen in der Tabelle? Dann rufe doch die Liste der tr's in der Tabelle ab:

var tabelle = document.getElementById("Tabelle");
var zeilen = tabelle.getElementsByTagName("tr").length;

Gruß Herbalizer

[Andreas Korthaus]

Hallo!

Gehts um die Anzahl der Zeilen in der Tabelle? Dann rufe doch die Liste der tr's in der Tabelle ab:

var tabelle = document.getElementById("Tabelle");
var zeilen = tabelle.getElementsByTagName("tr").length;

So einfach? Danke schön!

Und wo ich hier gerade mal einen Javascript-Experten da habe:
Kan ich mit einem Javascript zusätzliche Formular-Felder in ein Formular schreiben? Ich will in Abhängigkeit von der Auswahl eines Select-Feldes von dort aus mit onChange eine Funktion starten die dann je nachdem ein weiteres Selectfeld, oder ein Textfeld, oder eine Kombination und eine Button, oder gar nichts einfügt. Ist auch dafür eine Funktion in Javascript vorgesehen?

Vielen Dank!

Grüße
Andreas

[Herbalizer]

Hi!

Und wo ich hier gerade mal einen Javascript-Experten da habe:

:)

Kan ich mit einem Javascript zusätzliche Formular-Felder in ein Formular schreiben? Ich will in Abhängigkeit von der Auswahl eines Select-Feldes von dort aus mit onChange eine Funktion starten die dann je nachdem ein weiteres Selectfeld, oder ein Textfeld, oder eine Kombination und eine Button, oder gar nichts einfügt. Ist auch dafür eine Funktion in Javascript vorgesehen?

Klar. Nämlich document.createElement("tagname"), Sprich, du must ,da es nicht so 'ne schöne Methode wie insertRow() gibt, das gewünschte Element erzeugen und in ein form einhängen.
Ein Beispiel: Du hast ein formular mit 3 Eingabefeldern und möchtest nun ein viertes hinzufügen, welches zw. dem ersten und zweiten Eingabefeld platziert werden soll.

Das HTML:

<form action="">
<input type="text" value="1"/>
<input type="text" value="2"/>
<input type="text" value="3"/>
</form>

Das Script

var formular = document.forms[0];
var eingabe = formular.elements[1]; // alternativ auch formular.getElementsByTagName("input")
var neueEingabe = document.createElement("input"); // neues Element erzeugen
neueEingabe.type = "text"; // Eigenschaften
neueEingabe.value = "neu";
//formular.appendChild(neueEingabe); // anhängen am Ende, was wir ja nicht wollen
formular.insertBefore(neueEingabe,eingabe); // einfügen vor dem zweiten Eingabefeld

Im Falle eines erzeugten Selectelements kann man iesem Optionelemente mitels der Methode add() hinzufügen

http://www.w3.org/TR/DOM-Level-2-Core
http://www.w3.org/TR/DOM-Level-2-HTML

Gruß Herbalizer

[Herbalizer]

Nachtrag:

var eingabe = formular.elements[1]; // alternativ auch formular.getElementsByTagName("input")

Soll sein

var eingabe = formular.elements[1]; // alternativ auch formular.getElementsByTagName("input").item(1)

Gruß Herbalizer

[Herbalizer]

Hi!

1: TD.className = "abc";
2: TD.setAttribute("class","abc");

Gruß Herbalizer