FraFu: Tabellenzeilen einfügen

SELF-Forum

Tabellenzeilen einfügen

FraFu
– Informationen zu den Bewertungsregeln

Hallo!

Ich habe jetzt keinen Code zur Hand, da das Problem bei mir in einem sehr komplexen Zusammenhang auftritt und ich das Problem jetzt nicht auf ein kleines Beispiel abstrahieren möchte.
Aber vielleicht ist das Problem ja bekannt.

Ich rufe über XMLHttRequest eine XML Datei auf, die in etwa folgendes Ergebnis liefert:

  
<ajax-response>  
  <table>  
     <tr class='trClass'>  
        <td class='tdClass'>Inhalt 1</td>  
        <td class='tdClass'>Inhalt 2</td>  
     </tr>  
     <tr class='trClass'>  
        <td class='tdClass'>Inhalt 1</td>  
        <td class='tdClass'>Inhalt 2</td>  
     </tr>  
  </table>  
</ajax-response>

In meinem HTML Code habe ich bereits ein Tabelle die folgendermaßen aufgebaut ist:

  
<table id='table'>  
  <thead>  
    <tr>  
       <th>head 1</td>  
       <th>head 2</td>  
    </tr>  
  </head>  
  <tbody id='tbody'>  
  </tbody>  
  <tfoot>  
    <tr>  
       <td>asdfs</td>  
       <td>asdfs</td>  
    </tr>  
  </tfoot>  
</table>

In meiner Funktion die den XMLHttRequest Response bearbeitet, gehe ich jetzt die Tabelle aus dem XML Response Zeile für Zeile durch
und hänge die Zeile in den tbody mit insertBefore ein.
tbody.insertBefore(trZeile, letztesElement)
ein.
Grunsätzlich funktioniert das auch, aber die Tabelle erscheint in einer Zeile. Weder IE noch FF/Mozilla rendern die Tabelle richtigt. Es ist, als ob die tr und td Elemente einfach ignoriert würden.
Wenn ich den erzeugten Code markiere und mir im FF den Quelltext davon anzeigen lasse, dann ist das vom Code eine völlig korrekte Tabelle.
Aber der Browser ignoriert aus irgendwelchen Gründen die Tabelle.

Ist das Problem jemanden bekannt? Gibts dafür eine Lösung?

Wenn ich tr Element aus einer im HTML Code bestehenden Tabelle kopiere, wird die Tabelle richtig gerendert. Das beschriebene Problem tritt nur auf, wenn die neuen trs die hinzugefügt werden sollen, aus einer XML Quelle kommen.

mfg
  Frafu

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Tabellenzeilen einfügen

    wahsaga Homepage des Autors
    – Informationen zu den Bewertungsregeln

    hi,

    Wenn ich tr Element aus einer im HTML Code bestehenden Tabelle kopiere, wird die Tabelle richtig gerendert. Das beschriebene Problem tritt nur auf, wenn die neuen trs die hinzugefügt werden sollen, aus einer XML Quelle kommen.

    Dann arbeitest du vermutlich nicht wirklich mit Nodes, sondern mit plain text ...?

    gruß,
    wahsaga

    --
    /voodoo.css:
    #GeorgeWBush { position:absolute; bottom:-6ft; }
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

  2. Tabellenzeilen einfügen

    FraFu
    – Informationen zu den Bewertungsregeln

    Hallo!
    Zur Veranschaulichung hab ich mal ein kleines Beispiel geschrieben:
    Ich verwende dazu die prototype.js
    Im Gegensatz zu meinem Ursprungsposting wird hier gleich die komplette Tabelle aus dem XML Response eingefügt.

    Wenn man den Button "insert Table" klickt, wird die Tabelle zwar eingefügt aber nicht richtig gerendert.

    HTML Datei:

      
<html>  
<head>  
 <script type="text/javascript" src="./js/prototype.js"></script>  
 <script type='text/javascript'>  
  function getTable(){  
  
   pars='';  
   url='testresponse.xml';  
   var myAjax = new Ajax.Request(  
    url,  
    {  
     method: 'get',  
     parameters: pars,  
     onComplete: insertTable  
    });  
  }  
  
  function insertTable(req){  
   var xml=req.responseXML;  
   var table=xml.firstChild.firstChild; // IE liefert sofort table  
   if(table.nodeName!="table") // FF/Mozilla liefert zuerst noch #text  
    table=table.nextSibling;  
  
   document.body.insertBefore(table, document.body.firstChild);  
  }  
 </script>  
</head>  
<body>  
<button onClick="getTable()">insert Table</button>  
</body>  
</html>

    XML Datei:

      
<ajax-response>  
 <table border="1">  
  <tr>  
   <td>Zeile 1 Spalte 1</td>  
   <td>Zeile 1 Spalte 2</td>  
  </tr>  
  <tr>  
   <td>Zeile 2 Spalte 1</td>  
   <td>Zeile 2 Spalte 2</td>  
  </tr>  
 </table>  
</ajax-response>

    mfg
      frafu

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

  3. Beispiel

    FraFu
    – Informationen zu den Bewertungsregeln

    Hallo!
    Zur Veranschaulichung hab ich mal ein kleines Beispiel geschrieben:
    Ich verwende dazu die prototype.js
    Im Gegensatz zu meinem Ursprungsposting wird hier gleich die komplette Tabelle aus dem XML Response eingefügt.

    Wenn man den Button "insert Table" klickt, wird die Tabelle zwar eingefügt aber nicht richtig gerendert.

    HTML Datei:

      
<html>  
<head>  
 <script type="text/javascript" src="./js/prototype.js"></script>  
 <script type='text/javascript'>  
  function getTable(){  
  
   pars='';  
   url='testresponse.xml';  
   var myAjax = new Ajax.Request(  
    url,  
    {  
     method: 'get',  
     parameters: pars,  
     onComplete: insertTable  
    });  
  }  
  
  function insertTable(req){  
   var xml=req.responseXML;  
   var table=xml.firstChild.firstChild; // IE liefert sofort table  
   if(table.nodeName!="table") // FF/Mozilla liefert zuerst noch #text  
    table=table.nextSibling;  
  
   document.body.insertBefore(table, document.body.firstChild);  
  }  
 </script>  
</head>  
<body>  
<button onClick="getTable()">insert Table</button>  
</body>  
</html>

    XML Datei:

      
<ajax-response>  
 <table border="1">  
  <tr>  
   <td>Zeile 1 Spalte 1</td>  
   <td>Zeile 1 Spalte 2</td>  
  </tr>  
  <tr>  
   <td>Zeile 2 Spalte 1</td>  
   <td>Zeile 2 Spalte 2</td>  
  </tr>  
 </table>  
</ajax-response>

    mfg
      frafu

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Beispiel

      wahsaga Homepage des Autors
      – Informationen zu den Bewertungsregeln

      hi,

      Im Gegensatz zu meinem Ursprungsposting wird hier gleich die komplette Tabelle aus dem XML Response eingefügt.

      Wenn man den Button "insert Table" klickt, wird die Tabelle zwar eingefügt aber nicht richtig gerendert.

      Du kannst nicht einfach so Nodes aus einem Dokument (xml) in ein anderes (html) umhängen.
      Zuerst mal musst du den Knoten bzw. die Kontenstruktur in den Kontext des aktuellen Dokumentes importieren - dafür gibt es die Methode importNode(). Kann er IE aber wieder nicht, da muss man irgendwie mit cloneNode rumbasteln, oder sich selber was zum importieren schreiben. Es gibt dazu schon ein paar Betrachtungen, u.a. von molily, im Archiv.

      gruß,
      wahsaga

      --
      /voodoo.css:
      #GeorgeWBush { position:absolute; bottom:-6ft; }
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Beispiel

        FraFu
        – Informationen zu den Bewertungsregeln

        Hallo!

        Du kannst nicht einfach so Nodes aus einem Dokument (xml) in ein anderes (html) umhängen.

        Sowas in der Art hab ich mir schon gedacht.

        Zuerst mal musst du den Knoten bzw. die Kontenstruktur in den Kontext des aktuellen Dokumentes importieren - dafür gibt es die Methode importNode(). Kann er IE aber wieder nicht, da muss man irgendwie mit cloneNode rumbasteln, oder sich selber was zum importieren schreiben. Es gibt dazu schon ein paar Betrachtungen, u.a. von molily, im Archiv.

        Danke. Ich werd mal danach suchen.

        mfg
          frafu

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

  4. neues Beispiel

    FraFu
    – Informationen zu den Bewertungsregeln

    Hallo!

    Ich hab jetzt wie von wahsage vorgeschlagen, mit cloneNode bzw importNode beschäftigt. Damit bin ich auch nicht wirklich weitergekommen, da einiges im IE nicht funktioniert.
    In einem Forum bin auch eine andere Methode gekommen.

    Hier mein neuer Code. Funktioniert im FF/Mozilla wunderbar. Nur im IE nicht. Das komische ist, dass die Tabelle im IE offenbar richtig ins DOM eingehängt wird, aber einfach nicht angezeigt wird. Der IE zeigt auch keine Fehlermeldungen.
    Dh, wenn ich nach dem Einhängen document.body mit firstchild und dann mit nextSibling durchgehe, dann ist die Tabelle vorhanden.
    Die style Eigenschaften der Tabelle nach dem Einfügen zu setzen (zb display, width, height, ...) nützt auch nichts.
    Die Funktion myNodeCopy stammt nicht von mir, sondern habe ich von hier.
    Irgendwelche Ideen warum das das im IE nicht geht?

    Hier der Code:

      
<html>  
<head>  
<style text="text/css">  
.test {  
 color: green;  
}  
</style>  
 <script type="text/javascript" src="./js/prototype.js"></script>  
 <script type='text/javascript'>  
  
  
 function myNodeCopy(oNode, bImportChildren){  
  var oNew;  
  
  if(oNode.nodeType == 1){  
   oNew = document.createElement(oNode.nodeName);  
   for(var i = 0; i < oNode.attributes.length; i++){  
    oNew.setAttribute(oNode.attributes[i].name, oNode.attributes[i].value);  
   }  
   //alert(oNew.style.cssText);  
   //oNew.style.cssText = oNode.style.cssText;  
  } else if(oNode.nodeType == 3){  
   oNew = document.createTextNode(oNode.nodeValue);  
  }  
  
  if(bImportChildren && oNode.hasChildNodes()){  
   for(var oChild = oNode.firstChild; oChild; oChild = oChild.nextSibling){  
    oNew.appendChild(myNodeCopy(oChild, true));  
   }  
  }  
  
  return oNew;  
 }  
  
  function getTable(){  
  
   pars='';  
   url='testresponse.xml';  
   var myAjax = new Ajax.Request(  
    url,  
    {  
     method: 'get',  
     parameters: pars,  
     onComplete: insertTable  
    });  
  }  
  
  function insertTable(req){  
   var xml=req.responseXML;  
   var table=xml.firstChild.firstChild; // IE liefert sofort table  
   if(table.nodeName!="table") // FF/Mozilla liefert zuerst noch #text  
    table=table.nextSibling;  
  
   var table1=myNodeCopy(table,true);  
   document.body.appendChild(table1);  
  }  
  
 </script>  
</head>  
<body>  
<button onClick="getTable()">insert Table</button>  
</body>  
</html>

    testresponse.xml:

      
<ajax-response>  
 <table border="1">  
  <tr>  
   <td onclick='alert("HALLO")'>Zeile 1 Spalte 1</td>  
   <td style='background-color: red;'>Zeile 1 Spalte 2</td>  
  </tr>  
  <tr>  
   <td><span>test</span></td>  
   <td class='test'>Zeile 2 Spalte 2</td>  
  </tr>  
 </table>  
</ajax-response>

    mfg
      frafu

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. neues Beispiel

      wahsaga Homepage des Autors
      +1 Informationen zu den Bewertungsregeln

      hi,

      Das komische ist, dass die Tabelle im IE offenbar richtig ins DOM eingehängt wird, aber einfach nicht angezeigt wird.

      Du hast vergessen zu berücksichtigen, dass der IE beim dynamischen Erzeugen einer Tabelle unbedingt explizit einen TBody erzeugt haben will, in den die Tabellenzeilen dann eingehängt werden.

      gruß,
      wahsaga

      --
      /voodoo.css:
      #GeorgeWBush { position:absolute; bottom:-6ft; }
      Beitrag melden
      +1
      Informationen zu den Bewertungsregeln

      1. Funktioniert

        FraFu
        – Informationen zu den Bewertungsregeln

        Hallo!

        Du hast vergessen zu berücksichtigen, dass der IE beim dynamischen Erzeugen einer Tabelle unbedingt explizit einen TBody erzeugt haben will, in den die Tabellenzeilen dann eingehängt werden.

        Danke! Das wußte ich nicht! Ich hab jetzt im response.xml in den Table einen Tbody eingefügt und jetzt funktioniert das ganze!

        mfg
          frafu

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln