add / rem row

[Emanuel]

Hallo Leute!

Ich will mittels JS bei einer Tabelle mehrere rows hinzufügen / entfernen. Soweit auch kein Problem:

  
<table id="testtable">  
  <tr>  
    <td>Topic1</td>  
    <td><input type="text" name=""></td>  
    <td><a href="javascript:addRow()"><img src="add.png"></a>  
        <a href="javascript:remRow()"><img src="delete.png"></a></td>  
  </tr>  
</table>  
<input type="submit" name="test1" value="fertig">  

Soviel zum HTML Teil, das JS sieht so aus:

  
function addRow()  
{  
  var row1 = document.createElement("TR")  
  var td1 = document.createElement("TD")  
  var td2 = document.createElement("TD")  
  var input = document.createElement("input")  
  var text = document.createTextNode("Topic1")  
  
  input.setAttribute("type","text");  
  ...  
  
  td1.appendChild(text)  
  td2.appendChild(input)  
  row1.appendChild(td1);  
  row1.appendChild(td2);  
  
  document.getElementById("testtable").appendChild(row1);  
}  
  
function remRow()  
{  
if(document.getElementById("testtable").getElementsByTagName("tr").length > 1){  
  var lasttr = document.getElementById("testtable").lastChild;  
  document.getElementById("testtable").removeChild(lasttr);  
  
    }  
}  

Damit kann man schön Felder hinzufügen und löschen. Das Problem ist, wenn man oft hintereinander hinzufügt und löscht, wird der Abstand zum Button nach der Tabelle immer größer.
Weiß einer wie man das Problem umgeht?

MfG Emanuel

[Struppi]

Ich will mittels JS bei einer Tabelle mehrere rows hinzufügen / entfernen. Soweit auch kein Problem:

Das Table Objekt kennt die Methoden insertRow() und deleteRow()
http://de.selfhtml.org/javascript/objekte/htmlelemente.htm#table

Struppi.

[Gunnar Bittersmann]

@@Emanuel:

<a href="javascript:addRow()">

Siehe hierzu das in https://forum.selfhtml.org/?t=164443&m=1071889 unten Gesagte.

<img src="add.png">

Der zwingend notwendige Alternativtext fehlt.

<table id="testtable">
  <tr>

Das erzeugt (bei Verarbeitung als 'text/html') einen anderen Elementbaum als du denkst. Schau dir das mal im DOM-Inspector an! (Den hast du hoffentlich zusammen mit Firefox installiert?) Nostradamus hatte mal wieder recht.

input.setAttribute("type","text");

'setAttribute()' solltest du meiden; IIRC hat der IE damit so seine Probleme. Einfach:

input.type = "text";

Das Problem ist, wenn man oft hintereinander hinzufügt und löscht, wird der Abstand zum Button nach der Tabelle immer größer.
Weiß einer wie man das Problem umgeht?

Ja. Alle 'tr' in den 'tbody' hängen.

Statt 'createElement()'/'appendChild()'/'removeChild()' kannst du auch 'insertRow()'/'deleteRow()' verwenden. [http://de.selfhtml.org/javascript/objekte/htmlelemente.htm#table]

Live long and prosper,
Gunnar

[JürgenB]

Hallo Gunnar,

input.type = "text";

hat der IE nicht Probleme, den type zu Ändern?

Ich habe im Forum folgendes gefunden und benutze es auch:

  try  
  {  
    var inp = document.createElement("input");  
    inp.type = "...";  
  }  
  catch(err) {  
    var inp = document.createElement('<input type="...">');  
  }

Gruß, Jürgen

[Struppi]

hat der IE nicht Probleme, den type zu Ändern?

Ja, aber erst, wenn das Element bereits im Dokument eingefügt wurde.

try

{
    var inp = document.createElement("input");
    inp.type = "...";
  }
  catch(err) {
    var inp = document.createElement('<input type="...">');
  }

  
In dem Fall ist es überflüssig.  
  
Struppi.

[JürgenB]

Hallo Struppi,

hat der IE nicht Probleme, den type zu Ändern?

Ja, aber erst, wenn das Element bereits im Dokument eingefügt wurde.

In dem Fall ist es überflüssig.

stimmt, eben getestet. Ich weiß auch nicht mehr, warum es bei mir zuerst nicht geklappt hat und ich es mit try-catch gemacht habe.

Gruß, Jürgen

[Struppi]

In dem Fall ist es überflüssig.

stimmt, eben getestet. Ich weiß auch nicht mehr, warum es bei mir zuerst nicht geklappt hat und ich es mit try-catch gemacht habe.

Wenn das Element bereits im Dokument eingefügt wurde, dann ist der try Block sinnvoll. Ich erinner mich dass es mindestens einmal einen Thread diesbezüglich gab.

Ach, und was mir grad einfällt, das name Attribut ist hier eher das Problem, da das Element im IE nicht über document.forms['..'].elements[name] ansprechbar ist, dann kann man die Variante von dir verwenden (mit name='...' statt type)

Struppi.

[Gunnar Bittersmann]

@@Struppi:

hat der IE nicht Probleme, den type zu Ändern?

Ja, aber erst, wenn das Element bereits im Dokument eingefügt wurde.

Auf die Reihenfolge kommt es an?

In der Tat:

var input = document.createElement("input");  
document.body.appendChild(input);  
input.type="password";

gefällt dem IE (6) gar nicht; bei

var input = document.createElement("input");  
input.type="password";  
document.body.appendChild(input);

hingegen tut er, was er soll.

Live long and prosper,
Gunnar

[Struppi]

hat der IE nicht Probleme, den type zu Ändern?

Ja, aber erst, wenn das Element bereits im Dokument eingefügt wurde.

Auf die Reihenfolge kommt es an?

Ja

hingegen tut er, was er soll.

Das Problem ist, dass der IE in keinem Fall nachträglich den type ändern kann, da hilft auch kein try.

Struppi.

[Emanuel]

Ok, danke mal an alle die sich hier geäußert haben.

Ich werde mal eure Tipps anwenden und hoffe, dass dann alles klappt!
(Ist das Problem mit dem vergrößerten Abstand zum button mit insertRow() und deleteRow() beseitigt?)

MfG Emanuel