Dominik Amon: Neue Reihe in Tabelle einfügen?

Hallo

Ich möchte per Javascript zu einer Tabelle dynamisch eine Reihe (die wiederum einige Zellen enthält) hinzufügen.

Soweit so einfach, problematisch wirds allerdings dann wenn diese neue Zelle immer ganz oben stehen soll und die anderen Reihen dementsprechend wandern die anderen Reihen nach unten. Ich habe mir in der Referenz den insertBefore Syntax rausgesucht:

http://selfhtml.teamone.de/javascript/objekte/node.htm#insert_before

Problematischerweise bekomme ich als Fehlermeldung "Ungültiges Argument".

[BTW: Da es sich um eine Intranet Anwendung handelt und in der Firma per Standard IE5.0 verwendet wird muss nicht für andere Browser zusätzlich programmiert werden]

Anbei noch mein Code,

danke für eine Richtigstellung oder einer anderen Art der Implimentierung (sofern es sich nicht um Stringzusammenkettung alá
tableCode = neuzelle + tableCode)

mfg
Dominik

<html>
<head>
<title>Test Seite</title>
<script language="JavaScript">
 var nextId = 1;

function insertRow(){

nextId++;

var newCell;
  var textNode;
  var newTableRow = document.createElement("tr");
  newTableRow.setAttribute("id", "row" + nextId);

newCell = document.createElement("td");
  textNode = document.createTextNode("X" + nextId);
  newCell.appendChild(textNode);
  newTableRow.appendChild(newCell);

newCell = document.createElement("td");
  textNode = document.createTextNode("X" + nextId);
  newCell.appendChild(textNode);
  newTableRow.appendChild(newCell);

alert(newTableRow.outerHTML);

var lastRow = document.getElementById("row" + (nextId-1));
  document.getElementById("dynamicRows").insertBefore(newTableRow, lastRow);

}
</script>
</head>

<body>

<a href="javascript:insertRow()">Add Row</a>
 <table id="dynamicRows">
 <tr id="row1">
  <td>Eintrag 1</td>
  <td>Eintrag 1</td>
 </tr>
 </table>
</body>

</html>

  1. Hallo,
    dein Problem liegt darin, das tr in der Welt des DOM niemals ein Kind von table direkt ist, sondern immer eines von einem tbody.
    Wenn du ein solches in deine Tabelle einfügst und dem die entsprechende ID verpaßt, klappts auch mit dem Nachbarn.
     <table>
     <tbody id="dynamicRows">
     <tr id="row1">
      <td>Eintrag 1</td>
      <td>Eintrag 1</td>
     </tr>
     </tbody>
     </table>

    Liebe Grüße, Uschi