Dynamisches einfügen von Zeilen in eine Spalte

Fragen und Antworten zur clientseitigen Programmiersprache JavaScript

Dynamisches einfügen von Zeilen in eine Spalte

Beitragvon Bluecaspar am Mi 10. Feb 2010, 18:09

Hallo,

ich möchte gerne eine Zeile zwischen zwei andere Zeilen einfügen. Leider klappt folgender Versuch noch nicht so richtig. Vielleicht kann mir ja einer von euch sagen, wo der Fehler liegt?

Code: Alles auswählen
<html>

  <head>
 
  <title>
    Test
  </title>

    <script type="text/javascript">
   
    function add(){
   
          var tr = document.createElement("tr");
   
          var td = document.createElement("td");
          td.appendChild(document.createTextNode("Test"));
          tr.appendChild(td);
         
          var td = document.createElement("td");
          td.appendChild(document.createTextNode("Test"));
          tr.appendChild(td);
         
          document.getElementById("table1").insertBefore(tr, document.getElementById("row2"));
         
          // document.getElementById("table1").appendChild(tr); // Klappt anstandslos
   
    }
   
    </script>

  </head>
 
  <body>
 
  <table id="table1" border="1">
 
    <tr id="row1">
   
      <td>
      erster
      </td>
     
      <td>
      zweiter
      </td>
     
      </tr>
     
      <tr id="row2">
     
      <td>
      0
      </td>
     
      <td>
      1
      </td>
   
    </tr>
 
  </table>
 
  <p onClick=add() >add</p>
 
  </body>
 
</html>
Bluecaspar
 
Beiträge: 6
Registriert: Di 9. Feb 2010, 13:41

Beitragvon alm am Mi 10. Feb 2010, 19:37

Hallo,

das kann daran liegen, dass nach dem Table-Tag automatisch ein tbody eingefügt wird und dieses das erste Child der Tabelle ist. Also entsteht tatsächlich die Dokumentstruktur:

Code: Alles auswählen
<table id="table1">
  <tbody>
   <tr id="row1">...
  </tbody>
</table>


In diesem Fall müsste die id im tbody-Tag stehen, da es beim Vorgang des Einfügens das Element ist, auf welchem die Methode insertBefore ausgeführt werden muss.


Gruß
Alex
EvoComp.de
Beachten Sie unsere Beispiele zu JavaScript, PHP und Ajax, sowie unser PHP MySQL Tutorial
alm
 
Beiträge: 81
Registriert: Do 21. Feb 2008, 16:22
Posts

Beitragvon Bluecaspar am Do 11. Feb 2010, 10:37

Ja genau, das war der Fehler. Vielen Dank Alex.

Hier der korrigierte Code:

Code: Alles auswählen
<html>

  <head>
 
  <title>
    Test
  </title>

    <script type="text/javascript">
   
    function add(){
   
          var tr = document.createElement("tr");
   
          var td = document.createElement("td");
          td.appendChild(document.createTextNode("Test"));
          tr.appendChild(td);
         
          var td = document.createElement("td");
          td.appendChild(document.createTextNode("Test"));
          tr.appendChild(td);
         
          document.getElementById("tbody1").insertBefore(tr, document.getElementById("row2"));
         
          //document.getElementById("table1").appendChild(tr); // Klappt anstandslos
   
    }
   
    </script>

  </head>
 
  <body>
 
  <table border="1">
    <tbody id="tbody1">
      <tr id="row1">
     
        <td>
        erster
        </td>
       
        <td>
        zweiter
        </td>
       
      </tr>
       
      <tr id="row2">
       
        <td>
        0
        </td>
       
        <td>
        1
        </td>
     
      </tr>
    </tbody>
  </table>
 
  <p onClick=add() >add</p>

  </body>
 
</html>
Bluecaspar
 
Beiträge: 6
Registriert: Di 9. Feb 2010, 13:41


Zurück zu JavaScript

cron