tabelle und formularelemente duplizieren

[Maik]

hallo

wie kann ich eine tabelle die formular felder enthält dublizieren und die neuen formularfelder mit default werten oder leeren inhalten füllen?
bsp:
<table id="tbl1"><!-- brauch ich eine id ? -->
<tr>
  <td><input typ="text" name="werte[0][info] value="eingabe"></td>
<tr></table>

onClick soll dies erzeugen:

<table id="tbl2"><!-- brauch ich eine id ? -->
<tr>
  <td><input typ="text" name="werte[1][info] value=""></td><!-- werte[i+1] -->
<tr></table>

Gruß Maik

[Maik]

hallo

habe jetzt mal ein wenig in der doku gestöbert :-)
auch wenn mir das a) zu umständlich scheint kapiert das zumindest der firefox.
im IE taucht hier nichts auf! allerdings wird beim absenden eines formulars die anzahl der erstellten "formular kopien" übertragen. :-| (also ohne vorige eingabe möglichkeit.
was mache ich hier falsch?

<script language="JavaScript">
var tablcount = 0;
function insert_table(elem) {
    var fx = document.getElementById(elem);
    var tabl  = document.createElement("table");
    tabl.id = 'tbl' + tablcount;
    tabl.width = '100%';
    tabl.border = 3;

var TR_1  = document.createElement("tr");
    var TD_1_1   = document.createElement("td");
    var TD_1_1_content1 = document.createTextNode("some text");
    TD_1_1.appendChild(TD_1_1_content1);

var TD_1_2 = document.createElement("td");
    var TD_1_2_content1 = document.createElement("input");
        TD_1_2_content1.type = 'text';
        TD_1_2_content1.name = 'akey';
        TD_1_2_content1.size = 5;
    var TD_1_2_content2 = document.createTextNode(" or ");
    var TD_1_2_content3 = document.createElement("input");
        TD_1_2_content3.type = 'text';
        TD_1_2_content3.name = 'astring';
        TD_1_2_content3.size = 20;
    var TD_1_2_content4 = document.createElement("a");
        TD_1_2_content4.href = 'javascript:x();';
        TD_1_2_content4.onclick = function() {
                                  url =  'http://wehwehweh';
                                  alert(url);
                                  return false;
                                }
    var TD_1_2_content5 = document.createElement("img");
        TD_1_2_content5.src = 'search.gif';
        TD_1_2_content5.border = 0;
        TD_1_2_content4.appendChild(TD_1_2_content5);

TD_1_2.appendChild(TD_1_2_content1);
    TD_1_2.appendChild(TD_1_2_content2);
    TD_1_2.appendChild(TD_1_2_content3);
    TD_1_2.appendChild(TD_1_2_content4);

TR_1.appendChild(TD_1_1);
      TR_1.appendChild(TD_1_2);
      tabl.appendChild(TR_1);

var TR_2 = document.createElement("tr");
    var TD_2_1 = document.createElement("td");
    var TD_2_1_content1 = document.createTextNode("some info");
    TD_2_1.appendChild(TD_2_1_content1);
    var TD_2_2 = document.createElement("td");
    var TD_2_2_content1 = document.createElement("input");
    TD_2_2_content1.type = 'text';
    TD_2_2_content1.name = 'key2';
    TD_2_2_content1.value = 'wert';
    TD_2_2_content1.size = 10;
    TD_2_2.appendChild(TD_2_2_content1);
    TR_2.appendChild(TD_2_1);
    TR_2.appendChild(TD_2_2);
    tabl.appendChild(TR_2);
    fx.appendChild(tabl);
    tablcount++;
}
            //-->
</script>
<div id="mask"></div>
<a href="javascript:;" onClick="insert_table('mask')">doubble me</a>

Gruß Maik

[wahsaga]

hi,

im IE taucht hier nichts auf!
was mache ich hier falsch?

du hast vergessen, auch einen tbody zu erzeugen.
in HTML kann dieser weggelassen werden, ist dann implizit vorhanden.
bei der dynamischen erzeugung einer tabelle per JS scheint der FF das auch so zu raffen - der IE hingegen will dabei unbedingt einen tbody haben.

gruß,
wahsaga

[Maik]

hi,
in HTML kann dieser weggelassen werden, ist dann implizit vorhanden.
bei der dynamischen erzeugung einer tabelle per JS scheint der FF das auch so zu raffen - der IE hingegen will dabei unbedingt einen tbody haben.

Danke für den Tip, geht, macht es aber nicht :-(

var objtbl  = document.createElement("table");
 // table attr...
 var objtblbody  = document.createElement("tbody");
 // td & td's
 tabl.appendChild(objtblbody);
 fx.appendChild(objtbl);

richtig?

gruß,
wahsaga

gruß Maik

[Siechfred]

Tag Maik.

Danke für den Tip, geht, macht es aber nicht :-(
var objtbl  = document.createElement("table");
var objtblbody  = document.createElement("tbody");
tabl.appendChild(objtblbody);
fx.appendChild(objtbl);

Denk daran, dass dein Elementbaum jetzt so aussehen muss:

TABLE
  TBODY
    TR 1
      TD 1 1
      TD 1 2
    TR 2
      TD 2 1
      TD 2 2

Wie du erkennen kannst, sind deine TR keine Kinder von TABLE, sondern von TBODY, das musst du noch berücksichtigen. Einfach mal so ein TBODY einzuhängen reicht eben nicht ganz :-)

Siechfred

[Maik]

Tag Maik.
TABLE
  TBODY
    TR 1
      TD 1 1
      TD 1 2
    TR 2
      TD 2 1
      TD 2 2

Wie du erkennen kannst, sind deine TR keine Kinder von TABLE, sondern von TBODY, das musst du noch berücksichtigen. Einfach mal so ein TBODY einzuhängen reicht eben nicht ganz :-)

jetzt musste ich aber doch ein wenig nachdenken....
"und es wart licht" :-) so gehts! ;-)

Siechfred

Danke!
Maik