Mit JS Tabelle erzeugen

[kesnw]

Hallo,

habe ein großes (für euch vielleicht kleines) JS Problem. Ich habe eine Checkbox. Wenn man die anklickt soll eine Tabelle erscheinen. Das Formular sieht folgendermassen aus:

<form action="" method="" name="modules">
<TABLE>
  <TR VALIGN="top">
    <TD ALIGN="left"><input type="checkbox" name="module1" value="module1" onClick="JavaScript:change();"></TD>
  </TR>
  <DIV id="mod1"></DIV>
</TABLE>
</form>

Nun die Funktion change():

function change()
{
  var newTR = document.createElement("TR");
  document.getElementById("mod1").appendChild(newTR);
  var newTD = document.createElement("TD");
  document.getElementById("mod1").firstChild.appendChild(newTD);
  var td = document.getElementById("mod1").firstChild.firstChild;
  var newTDText = document.createTextElement("Hier steht ein Text in einer Tabelle!");
  td.appendChild(newTDText);

}

Leider erscheint ein JS Fehler beim Anklicken der Ckeckbox. Kann mir jemand helfen? Hab heut erst angefangen mich mit den Nodes zu beschäftigen und steig trotz SelfHTML noch nicht so ganz dahinter...

Danke schonmal für jede Antwort!

 

[Quaese]

Hi,

wie ich sehe, willst du eine neue Zeile in die bestehende Tabelle einhängen. Dazu musst du
einen TBODY mit ID einfügen. An diesen kannst du mit der Methode appendChild() einen
Zeilenknoten anhängen.

HTML-Code:

<form action="" method="" name="modules">
	<table>
  	<tbody id="tbodyID">
	    <tr VALIGN="top">
	      <td align="left">
	        <input type="checkbox" name="module1" value="module1" onClick="javascript: appendTR();">
	      </td>
	    </tr>
    </tbody>
  </table>
</form>

Das zugehörige JavaScript:

function appendTR(){
  // Neues Tabellenzeilen-Objekt erstellen
  var newTR = document.createElement("tr");
  // Neues Tabellenzellen-Objekt erstellen
  var newTD = document.createElement("td");


  // HTML einfügen
  newTD.innerHTML = "hallo welt";
  // Neue Tabellenzelle an Zeile "anhängen"
  newTR.appendChild(newTD);

  // Neue Zeile in Tabelle "einhängen"
  document.getElementById("tbodyID").appendChild(newTR);
}

Die createTextElement-Methode habe ich durch innerHTML ersetzt - ging schneller. Sollte
aber in den gängigen Browsern funktionieren.

Ich hoffe, das bringt dich weiter.

Ciao
Quaese

 

[Sven Mintel]

Weiterhin... es gibt keine Methode createTextElement()(in diesem Zusammenhang).... hast du bestimmt verwechselt mit createTextNode()

 

[kesnw]

Klasse, das sieht gut aus. Eine Frage hab ich aber noch.

Meine Tabelle besteht bereits aus unzähligen Zeilen und ich möchte diese neue Zeile mittendrin einfügen. Wie ich das sehe wird bei deinem Script die Zeile ans Ende angehängt. Wie kann ich das realisieren. Meine Idee war eben das <div id="mod1"></div> genau an der Stelle wo die neue Zeile reinsoll...

Danke nochmal!

 

[Sven Mintel]

z.B. per insertBefore()

Das mit dem <div> kannst du eher vergessen... ein <div> hat dort mittendrin nix verloren, und darf auch kein <tr> enthalten.

 

[kesnw]

Super klasse, es funktioniert. Nun muss ich nur noch die erzeugten Zeilen (sind von variabler Länge) im <tbody> löschen wenn ich die Checkbox deaktiviere!

Wie lösche ich den gesamten Baum in einem <tbody> element

 

[Sven Mintel]

Am Einfachsten geht es, wenn du den einen neuen TBODY erzeugst, und den Vorhandenen damit per replaceChild() ersetzt.