Tabellenreihe beliebig hinzufügen / entfernen

[Emanuel]

Hallo Leute!

Ich bin grad am JavaScript lernen und versuche mich gerade an einer, nennen wirs dynamischen Tabelle!
Ich habe diesbzgl. schon recht viel gesucht, leider ohne Erfolg.

Problem ist einfach:
Ich habe ein eine einfache Tabelle:

<table>
<tr>
   <td>Name: </td>
   <td><input type="text" ...></td>
   <td><a href="javascript:addrow()">Add Row</a></td>
</tr>

//So, nun soll mit Hilfe der JavaScrpt Funktion addrow eine Zeile hinzugefügt bzw. entfernt werden. Hätte mir das so ungefähr gedacht:

<script type="text/javascript">
   function addrow(){
      document.write("<tr><td>s.o.</td></tr>");
   }
</script>

//Leider musste ich feststellen, dass bei 'document.write', wenn dies innerhalb einer Funktion steht, anscheinend die gesamte Seite neu geladen wird. Dabei soll aber einfach an der stelle wo 'document.write' steht der code eingefügt werden. Wenn möglich soll immer wenn der User auf "Add Row" klickt eine Reihe hinzugefügt werden bzw. bei einem "Del Row" eine reihe gelöscht werden. Hat Dazu jemand eine konstruktive Idee? Wäre sehr dankbar dafür!

</table>

[omma]

http://de.selfhtml.org/javascript/objekte/node.htm
http://de.selfhtml.org/javascript/objekte/document.htm#write

Das sollte helfen.

[D.R.]

Hallo,

//Leider musste ich feststellen, dass bei 'document.write', wenn dies innerhalb einer Funktion steht, anscheinend die gesamte Seite neu geladen wird.

Stimmt nicht ganz. Wenn diese Funktion noch während des Ladevorganges ausgeführt wird, gibt es das Problem nicht.

Dabei soll aber einfach an der stelle wo 'document.write' steht der code eingefügt werden. Wenn möglich soll immer wenn der User auf "Add Row" klickt eine Reihe hinzugefügt werden bzw. bei einem "Del Row" eine reihe gelöscht werden. Hat Dazu jemand eine konstruktive Idee?

Zum Erzeugen neuer Elemente, kannst du generell die Methoden des http://de.selfhtml.org/javascript/objekte/node.htm@title=node-, sowie des document-Objektes einsetzen (appendChild(), createElement(), …). Alternativ dazu gibt es für http://de.selfhtml.org/javascript/objekte/htmlelemente.htm#table@title=Tabellen außerdem noch vereinfachte Methoden wie insertRow() und deleteRow(). Wenn du die http://de.selfhtml.org/javascript/objekte/htmlelemente.htm#tr@title=Tabellenzeilen erzeugt hast, musst du noch die Tabellenzellen einfügen. Wie du auf der eben verlinkten Seite sieht, gibt es auch hierfür wieder spezielle Methoden wie insertCell() und deleteCell().

Damit hättest du also schonmal eine Tabellenzelle erzeugt. Um diese nun mit Text zu füllen, kannst du mit der Methode document.createTextNode() einen Textknoten erzeugen und diesen per appendChild() einhängen.

Hier mal ein Beispiel, wie das aussehen könnte:

<script type="text/javascript">
function addrow(Obj,Text){
//Tabelle finden
while (Obj.nodeName.toLowerCase() != "table")
 Obj = Obj.parentNode;

alert(Obj.nodeName);

Obj.insertRow(Obj.rows.length).insertCell(0).appendChild(document.createTextNode(Text));

}
</script>

…

<table>
<tr>
   <td>Name: </td>
   <td><input type="text" name="newText" /></td>
   <td><input type="button" onclick="addrow(this,this.parentNode.getElementsByName('newText')[0].value)" value="Add Row" /></td>
</tr>
</table>

Allerdings ist das mit der Tabelle schon ziemlich umständlich. Möchtest du nicht lieber etwas listenartiges verwenden? Das wäre semantischer und zudem auch noch einfacher umzusetzen.

mfg. Daniel

[Emanuel]

Allerdings ist das mit der Tabelle schon ziemlich umständlich. Möchtest du nicht lieber etwas listenartiges verwenden? Das wäre semantischer und zudem auch noch einfacher umzusetzen.

Ja da hast du wohl recht!
Ich hätt wohl genauer lesen müssen bzgl. dem createElement zeug!
Habs jetzt mit einer Liste statt Tabelle gemacht, ist wirklich viel weniger Code:

<script type="text/javascript">
function addli() {

var li = document.createElement("li");
  var input = document.createElement("input");
  li.appendChild(input);
  document.getElementById("testul").appendChild(li);

}

</script>
<ul style="list-style:none;" id="testul">Namen&nbsp;&nbsp;&nbsp;&nbsp;<a href="javascript:addli()">klick</a><br><br>
 <li><input type="text"></li>
</ul>

Danke für eure Hilfe!
Eine Frage hätte ich noch, wenn ich z.b. für das 'input-feld' mehrere Attribute setzen will (maxlength, value, type, id, name,..) muss ich für jedes Attribut z.b.: "input.setAttribute("type","text");" schreiben oder gibts auch eine möglichkeit, gleich mehrere Attribute in quasi einer Zeile zu definieren, dass ich also nur einmal "setAttribute" verwenden muss. gleiche Frage auch für styles!

Danke, Emanuel

[planB]

hallo,

Eine Frage hätte ich noch, wenn ich z.b. für das 'input-feld' mehrere Attribute setzen will (maxlength, value, type, id, name,..) muss ich für jedes Attribut z.b.: "input.setAttribute("type","text");"

... früher oder später wirst du wohl auf eine Spezialität des IE stossen.

dieser Thread ist gerade ins Archiv gewandert: http://forum.de.selfhtml.org/archiv/2007/5/t151558/

Gruß planB

[D.R.]

Hallo,

Eine Frage hätte ich noch, wenn ich z.b. für das 'input-feld' mehrere Attribute setzen will (maxlength, value, type, id, name,..) muss ich für jedes Attribut z.b.: "input.setAttribute("type","text");" schreiben

Grundsätzlich solltest du aufgrund der Unzugänglichkeiten des IE lieber von setAttribute() absehen und statt dessen die entsprechenden Eigenschaften setzen.

oder gibts auch eine möglichkeit, gleich mehrere Attribute in quasi einer Zeile zu definieren, dass ich also nur einmal "setAttribute" verwenden muss.

Nein, aber du könntest dir dafür eine kleine Funktion schreiben, der du die Attribute (Als Objekt), sowie das HTMLElement (welches die Attribute bekommen soll) übergibst.

Innerhalb dieser Funktion durchläuft du nun dein Objekt mit einer for-in-Schleift und hängst die Attribute (in Form von Eigenschaften) an das Element.

[Die Umsetzung überlasse ich mal dir :)]

Der Funktionsaufruf könnte dann folgendermaßen aussehen:

setProperties(document.getElementsByTagName("input"),{value:"Hallo", type: "text", id: "myInput"});

gleiche Frage auch für styles!

Das ist schwieriger, weil Stylesheets unterhalb des style-Objektes liegen. Du müsstest dir dafür noch eine weitere Funktion schreiben.

mfg. Daniel

[Emanuel]

Ok, danke euch mal soweit, da werd ich mich schon irgendwie durchbeißen!

MfG Emanuel

[Joachim]

Hi,

document.write("<tr><td>s.o.</td></tr>");

falscher Ansatz. Lies Dich in DOM-Methoden ein. Dein Problem lässt sich mit createElement, appendChild u.ä. problemlos lösen. document.write ist eher während des Renderns sinnvoll, später wird das Dokument überschrieben.

Gruesse, Joachim