Maria: Zeilen in Tabelle dynamisch hinzufügen

Hallo,

ich habe mehrere Probleme mit meinem Script, dass automatisch
Zeilen zu einer Tabelle hinzufügen soll.
Geplant ist, zu einer Tabelle mit einer Zeile - erstellt in der html-Datei 5 Zeilen dynamisch hinzuzufügen. Es klappt im Moment mit onclick - eigentlich hätte ich es gerne mit der Entertaste. Da habe ich noch gar keine Idee. Aber es funktioniert auch nur mit onclick immer in die erste Zeile. Bei den Folgezeilen kann ich klicken soviel ich will - da tut sich nichts.

Hier der Code.

<script language="JavaScript" type="text/javascript">

function zeile_neu(Tabelle, startpos)
{
 var Tabelle =  document.getElementById(Tabelle);
   var ct = Tabelle.rows.length;
   var startpos=startpos+ct;
 if (ct <6){
 Tabelle.insertRow(ct);
   Tabelle.rows[ct].insertCell(0);
   Tabelle.rows[ct].cells[0].innerHTML='<img title="Priorität ändern" onclick="changeOrder" src="./images/upImage.gif">';
   Tabelle.rows[ct].insertCell(1);
   Tabelle.rows[ct].cells[1].innerHTML='&nbsp;';
   Tabelle.rows[ct].insertCell(2);
   Tabelle.rows[ct].cells[2].innerHTML= startpos + '.';
   Tabelle.rows[ct].insertCell(3);
   Tabelle.rows[ct].cells[3].innerHTML='<input type="text" size="28" name="BAS[' + startpos + ']" onclick="zeile_neu[' + startpos + '])"  value="" />';
 Tabelle.rows[ct].insertCell(4);
   Tabelle.rows[ct].cells[4].innerHTML= '<img title="Aufgabe löschen" src="./images/remove.jpeg" onclick="removeZeile">';
 }
}

function removeZeile(Tabelle)
{
   var Tabelle =  document.getElementById(Tabelle)
   Tabelle.deleteRow(-1);
}

</script>

<html>
<head> </head>
<body>

<table width="280" background="./images/hintergrund.jpg"  border="1" cellpadding="0" cellspacing="0" >
<tbody id="mytable">
<!-- 1.Zeile der Tabelle -->
   <tr>
 <td><img title="Priorität ändern" onclick="changeOrder" src="./images/upImage.gif"></td>
 <td> &nbsp; </td>
 <td> 1. </td>
 <td> <input type="text" size="28" name="BAS[1]" onclick="zeile_neu('mytable', 1)" ></td>
 <td> <img title="Aufgabe löschen" src="./images/remove.jpeg" onclick="removeZeile('mytable')"> </td>
   </tr>

</tbody>

</table>

</body>
</html>

  1. Bin für alle Hinweise und Hilfen dankbar.

    Grüsse
    Maria

  2. function zeile_neu(Tabelle, startpos)
    ...
       var startpos=startpos+ct;

    ob's der Fehler ist weiß ich nicht, aber du überschreibst hier einen der Funktionsparameter.
    Was sagt denn die Firefox-JavaScript-Konsole (Menü Extra)

    1. function zeile_neu(Tabelle, startpos)
      ...
         var startpos=startpos+ct;

      ob's der Fehler ist weiß ich nicht, aber du überschreibst hier einen der Funktionsparameter.
      Was sagt denn die Firefox-JavaScript-Konsole (Menü Extra)

      Die Fehlermeldung vom firefox inspector lautet folgendermaßen:
      missing ; before statement
      [Break on this error] Tabelle.rows[ct].cells[3].innerHTML='<input type="text" size="28" name="BAS[' + startpos + ']" onclick="zeile_neu(''+ Tabelle +'' + startpos + ')" value="" />';

      Meines Erachtens liegt es an dem onclick. Hier stimmt die Syntax nicht. Nehme ich nur das raus, bekomme ich keine Fehlermeldung.

      1. Hallo,

        Die Fehlermeldung vom firefox inspector lautet folgendermaßen:
        missing ; before statement
        [Break on this error] Tabelle.rows[ct].cells[3].innerHTML='<input type="text" size="28" name="BAS[' + startpos + ']" onclick="zeile_neu(''+ Tabelle +'' + startpos + ')" value="" />';

          
        var s='<input type=\"text\" size=\"28\" name=\"BAS[' + startpos  
         + ']\" onclick=\"zeile_neu(\''+ Tabelle +'\' + startpos + ')\" value=\"\" />';  
                                                 ^^^^^^  
        if (ct==3 ) alert(s);  
        Tabelle.rows[ct].cells[3].innerHTML=s;  
        
        

        dann schau dir doch mal erzeugten HTML-code an ....

        Gruß plan_B

        --
             *®*´¯`·.¸¸.·
        1. Hallo,

          Die Fehlermeldung vom firefox inspector lautet folgendermaßen:
          missing ; before statement
          [Break on this error] Tabelle.rows[ct].cells[3].innerHTML='<input type="text" size="28" name="BAS[' + startpos + ']" onclick="zeile_neu(''+ Tabelle +'' + startpos + ')" value="" />';

          var s='<input type="text" size="28" name="BAS[' + startpos

          • ']" onclick="zeile_neu(''+ Tabelle +'' + startpos + ')" value="" />';
                                                     ^^^^^^
            if (ct==3 ) alert(s);
            Tabelle.rows[ct].cells[3].innerHTML=s;
          
          >   
          > dann schau dir doch mal erzeugten HTML-code an ....  
          >   
          >   
          > Gruß plan\_B  
            
          Der HTML-code sagt folgendes:  
          <input type="text" value="" onclick="zeile\_neu('[object HTMLTableSectionElement]2)" name="BAS[2]" size="28"/>  
            
          Ich weis leider trotzdem nicht was da falsch ist.  
            
          Beste Grüsse
          
          1. Hallo,

            Der HTML-code sagt folgendes:
            <input type="text" value="" onclick="zeile_neu('[object HTMLTableSectionElement]2)" name="BAS[2]" size="28"/>

            Ich weis leider trotzdem nicht was da falsch ist.

            das bedeutet, dass Tabelle (als id im Funkionsaufruf) nicht mehr ein String ist, sondern ein Objekt - und das passiert hier:

              
             var Tabelle =  document.getElementById(Tabelle);  
            
            

            dann etwa so:

              
            '... onclick=\"zeile_neu(\''+ Tabelle.id + '\',' + startpos + ')\" .....>'  
            
            

            ^^^^^   ^^^^

            die innerHTML-Strings zusammenbauen ist eine schöne Frickelei. Mit den http://de.selfhtml.org/javascript/objekte/document.htm#create_element@title=javascript/objekte/document.htm#create_element-Methoden wird's viel übersichtlicher

              
             var ele=document.createElement("input");  
              ele.type="text";  
              ele.value="";  
              ele.size="28";  
              ele.name="Bas["+startpos+"]";  
              ele.startpos=startpos;  
              ele.tab_id=Tabelle.id;  
              ele.onclick=function() {  
               zeile_neu( this.tab_id, this.startpos);  
               };  
             Tabelle.rows[ct].cells[3].appendChild(ele);  
            
            

            Gruß plan_B

            --
                 *®*´¯`·.¸¸.·
            1. '... onclick="zeile_neu(''+ Tabelle.id + '',' + startpos + ')" .....>'

              
              >                                     ^^^^^   ^^^^  
                
              Hallelujaaaahhh, es funktioniert. Ich musste noch die startposition umbauen, damit schön 1,2,3,4,5,6 erscheint. Danke, danke, danke!!!  
                
              
              >   
              > die innerHTML-Strings zusammenbauen ist eine schöne Frickelei. Mit den <http://de.selfhtml.org/javascript/objekte/document.htm#create_element@title=javascript/objekte/document.htm#create_element>-Methoden wird's viel übersichtlicher  
              >   
              > ~~~javascript
                
              
              >  var ele=document.createElement("input");  
              >   ele.type="text";  
              >   ele.value="";  
              >   ele.size="28";  
              >   ele.name="Bas["+startpos+"]";  
              >   ele.startpos=startpos;  
              >   ele.tab_id=Tabelle.id;  
              >   ele.onclick=function() {  
              >    zeile_neu( this.tab_id, this.startpos);  
              >    };  
              >  Tabelle.rows[ct].cells[3].appendChild(ele);  
              > 
              
              

              Damit werde ich mich morgen nochmal richtig auseinandersetzen. Ich muss das dann ja für jede Zelle so machen!?

              Gruß plan_B

              Vielen Dank und die besten Grüsse

  3. Hallo,

    hier hast du ja ein prima Muster:

    <td> <input type="text" size="28" name="BAS[1]" onclick="zeile_neu('mytable', 1)" ></td>
    <td> <img title="Aufgabe löschen" src="./images/remove.jpeg" onclick="removeZeile('mytable')"> </td>

    Tabelle.rows[ct].cells[3].innerHTML='<input type="text" size="28" name="BAS[' + startpos + ']" onclick="zeile_neu[' + startpos + '])"  value="" />';

    copy & paste funkioniert nicht immer ;)

      
    '... onclick=\"zeile_neu(\''+ Tabelle + '\',' + startpos + ')\" .....>'  
    
    

    Tabelle.rows[ct].insertCell(4);
       Tabelle.rows[ct].cells[4].innerHTML= '<img title="Aufgabe löschen" src="./images/remove.jpeg" onclick="removeZeile">';

    und hier müsste stehen:

      
    '.... onclick="removeZeile(\''+ Tabelle +'\')" >';  
    
    

    vielleicht zum Testen den innerHTML-String mit alert() angucken, ob Anführungszeichen und Klammern nun stimmen ...

    Gruß plan_B

    --
         *®*´¯`·.¸¸.·
    1. copy & paste funkioniert nicht immer ;)

      '... onclick="zeile_neu(''+ Tabelle + '',' + startpos + ')" .....>'

      
      >   
      > >  Tabelle.rows[ct].insertCell(4);  
      > >    Tabelle.rows[ct].cells[4].innerHTML= '<img title=\"Aufgabe löschen\" src=\"./images/remove.jpeg\" onclick=\"removeZeile\">';  
      >   
      > und hier müsste stehen:  
      > ~~~html
        
      
      > '.... onclick="removeZeile(\''+ Tabelle +'\')" >';  
      > 
      
      

      vielleicht zum Testen den innerHTML-String mit alert() angucken, ob Anführungszeichen und Klammern nun stimmen ...

      Gruß plan_B

      Hallo,

      mit alert bekomme ich die Ausgabe:
      <input type ="test" size="28" name="BAS[2]" onclick="zeile_neu('[objectHTMLTableSectionElement]2)" value="" />

      Und der Firefox Inspector sagt:
      unterminated string literal
      [Break on this error] zeile_neu('[object HTMLTableSectionElement]2)

      Ist es richtig, dass da die Anführungszeichen nicht stimmen. Aber wo gehören die hin?????