Tabelle dynamisch aufbauen

Lightware · 21.10.2009, 14:37

Hallo,

ich habe ein sehr spezielles Problem mit dem Aufbau einer Tabelle durch JS.

1. Problem
2. Mein bisheriger Code

1. Ich habe zwei Buttons mit dennen sich input-Felder erzeugen lassen.
Button eins erzeugt ein sogenanntes Mainfeld, was in der Tabelle als <th> vorhanden ist.
Button zwei erzeugt auch input Felder, welche sich aber je nach Eingabe in ein schon vorhandenes, statisches input Field, den Mainfeldern unterordnen sollen.

Beispiel:
<tr>
....<th><input type="text" id="m1" name="m1" value="" /></th>
....<th><input type="text" id="m2" name="m2" value="" /></th>
</tr>
<tr>
....<td><input type="text" id="m1s1" name="m1s1" value="" /><input type="text" id="m1s2" name="m1s2" value="" /></td>
....<td><input type="text" id="m2s1" name="m2s2" value="" /></td>
</tr>

Bis hierhin klar soweit?

2. Mein Code:

PHP-Code:

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <title></title>
  <script type="text/javascript">
    var i=0;
    var k=0;
    function newNav(){
      var nTH = document.createElement("th");
      var maintxt = document.createTextNode("Mainpoint "+i);
      var thStart = document.createTextNode("<th>");
      var thEnd = document.createTextNode("</th>");
      var tInput = document.createElement("input");
      tInput.name='m'+i;
      tInput.id='m'+i;
      tInput.style.width='150px';
      var divoutput = document.getElementById("mnav");
      divoutput.appendChild(thStart);
        divoutput.appendChild(maintxt);
        divoutput.appendChild(tInput);
      divoutput.appendChild(thEnd);
      i++;
    }
    function newsubNav(){
      var forMain = document.getElementById("formain").value;
      if(forMain != 0){
        var subtxt = document.createTextNode("Subpoint "+k);
        var tInput = document.createElement("input");
        tInput.name='s'+k;
        tInput.id='s'+k;
        tInput.style.width='150px';
        var divoutput = document.getElementById("mainnav");
        divoutput.appendChild(subtxt);
        divoutput.appendChild(tInput);
        k++;
      }
    }
  </script>
  </head>
  <body>
    Punkte: <br />
    <div id="nav_punkte">
      Hauptpunkt: <input type="button" onclick="javascript: newNav()" value="Hauptpunkt Anlegen" /><br />
      Unterpunkt: <input type="button" onclick="javascript: newsubNav()" value="Unterpunkt Anlegen" /> für Hauptpunkt(Zahl):<input type="text" id="formain" name="for_main" size="5" value="" />
      <div id="mainnav">
        <table id="navtab">
          <tr id="mnav">
            
          </tr>
        </table>
      </div>
    </div>
  </body>
</html>

Wie Ihr sehen könnt ist es fast fertig

Probleme hab ich mit dem erstellen von <th> und <td> und mit der Unterordnung von Unterpunkten.

Ich hoffe Ihr könnt mir weiterhelfen.

Vielen Dank

Grüße

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Bilder in Tabelle einfügen Mysql oder direkt?!	DKuhn	PHP Tipps 2009	3	30.09.2009 10:14
tabelle 2 in tabelle 1 updaten	steffen_dk	Datenbanken	11	04.07.2009 15:04
Tabelle dynamisch im Graphiken füllen	ViktorII	PHP Tipps 2009	5	24.04.2009 13:45
Daten dynamisch filtern und exportieren	tom2ba	Datenbanken	13	06.02.2009 13:54
Checkboxen dynamisch in Tabelle erzeugen	nussbaum	PHP Tipps 2007	4	21.01.2007 16:50
tabelle... dynamisch etc..	goelliboy	HTML, Usability und Barrierefreiheit	1	25.07.2006 01:09
Datensätze aus einer dynamisch erzeugten Tabelle einfügen?!	PermanetMarker	PHP Tipps 2006	15	30.06.2006 11:48
Problem mit Anzeige einer Tabelle mit dem Firefox?		HTML, Usability und Barrierefreiheit	8	28.11.2005 15:08
[Erledigt] Tabelle aktualisieren		Datenbanken	3	23.11.2005 09:54
[Erledigt] Problem mit mySQL		Datenbanken	7	27.09.2005 12:06
[Erledigt] mysql abfrage über 4 Tabelle - bis 3 geht, bei der 4. habert		Datenbanken	2	08.09.2005 11:59
Spalten Dynamisch als Tabelle anzeigen lassen(Spalten ausl.)	Cyberbob_at_tot	PHP Tipps 2005-2	6	04.06.2005 22:55
Tabelle dynamisch ausgeben		PHP Tipps 2005	5	28.03.2005 13:18
Tabelle in Tabelle ausrichten		HTML, Usability und Barrierefreiheit	7	03.01.2005 14:32
HILFE: Column count doesn't match value count at row 1		Datenbanken	17	12.06.2004 16:45

21.10.2009, 14:37
Lightware Erfahrener Benutzer Registriert seit: 18.08.2008 Beiträge: 131 PHP-Kenntnisse: Fortgeschritten	Tabelle dynamisch aufbauen Hallo, ich habe ein sehr spezielles Problem mit dem Aufbau einer Tabelle durch JS. 1. Problem 2. Mein bisheriger Code 1. Ich habe zwei Buttons mit dennen sich input-Felder erzeugen lassen. Button eins erzeugt ein sogenanntes Mainfeld, was in der Tabelle als <th> vorhanden ist. Button zwei erzeugt auch input Felder, welche sich aber je nach Eingabe in ein schon vorhandenes, statisches input Field, den Mainfeldern unterordnen sollen. Beispiel: <tr> ....<th><input type="text" id="m1" name="m1" value="" /></th> ....<th><input type="text" id="m2" name="m2" value="" /></th> </tr> <tr> ....<td><input type="text" id="m1s1" name="m1s1" value="" /><input type="text" id="m1s2" name="m1s2" value="" /></td> ....<td><input type="text" id="m2s1" name="m2s2" value="" /></td> </tr> Bis hierhin klar soweit? 2. Mein Code: PHP-Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title></title> <script type="text/javascript"> var i=0; var k=0; function newNav(){ var nTH = document.createElement("th"); var maintxt = document.createTextNode("Mainpoint "+i); var thStart = document.createTextNode("<th>"); var thEnd = document.createTextNode("</th>"); var tInput = document.createElement("input"); tInput.name='m'+i; tInput.id='m'+i; tInput.style.width='150px'; var divoutput = document.getElementById("mnav"); divoutput.appendChild(thStart); divoutput.appendChild(maintxt); divoutput.appendChild(tInput); divoutput.appendChild(thEnd); i++; } function newsubNav(){ var forMain = document.getElementById("formain").value; if(forMain != 0){ var subtxt = document.createTextNode("Subpoint "+k); var tInput = document.createElement("input"); tInput.name='s'+k; tInput.id='s'+k; tInput.style.width='150px'; var divoutput = document.getElementById("mainnav"); divoutput.appendChild(subtxt); divoutput.appendChild(tInput); k++; } } </script> </head> <body> Punkte: <br /> <div id="nav_punkte"> Hauptpunkt: <input type="button" onclick="javascript: newNav()" value="Hauptpunkt Anlegen" /><br /> Unterpunkt: <input type="button" onclick="javascript: newsubNav()" value="Unterpunkt Anlegen" /> für Hauptpunkt(Zahl):<input type="text" id="formain" name="for_main" size="5" value="" /> <div id="mainnav"> <table id="navtab"> <tr id="mnav"> </tr> </table> </div> </div> </body> </html> Wie Ihr sehen könnt ist es fast fertig Probleme hab ich mit dem erstellen von <th> und <td> und mit der Unterordnung von Unterpunkten. Ich hoffe Ihr könnt mir weiterhelfen. Vielen Dank Grüße


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten