[Javascript] tbody innerhtml onder IE

[Verwijderd]

Ik wil graag het stukje tussen <tbody id="table-body"></tbody> vervangen via Javascript, dit wil ik doen via "document,getElementsById('table-body').innerHTML = 'tr-etjes en td-tjes';" Alleen wil dit maar niet werken onder Internet Explorer, onder Firefox werkt het wel prima... (IE geeft als script-fout: Onbekende runtime fout.")

Aan de broncode van http://www.ajaxscaffold.com te zien hoort het wel te werken, daar wordt het Prototype framework gebruikt, maar ook als ik het met Prototype probeer werkt het onder Firefox wel en onder IE niet...

$('table-body').innerHTML = ''tr-etjes en td-tjes'

zou ik dan gebruiken, maar ook dat werkt dus niet. Weet iemand hoe ik dit ook onder IE kan laten werken? Of is er misschien een workaround voor dit probleem?

Stukje voorbeeldcode:

code:

<script type="text/javascript">
<!--
  function updatePrototype() {
    $('table-body').innerHTML = "<tr><td>Nieuwe inhoud</td></tr>";
  }

  function updateNormal() {
    document.getElementById('table-body').innerHTML = "<tr><td>Nieuwe inhoud</td></tr>";
  }
-->
</script>
<input type="button" onclick="updatePrototype()"  value="Prototype" /><br />
<input type="button" onclick="updateNormal()" value="Normaal" /><br />
<table>
  <tbody id="table-body">
    <tr>
      <td>Oude inhoud</td>
    </tr>
  </tbody>
</table>

[JHS]

Misschien dat je beter kan kijken naar DOM functies in plaats van innerHTML . Waarom dit niet werkt weet ik overigens ook niet..

[Vae Victis]

innerHTML Property
The property is read/write for all objects except the following, for which it is read-only: COL, COLGROUP, FRAMESET, HTML, STYLE, TABLE, TBODY, TFOOT, THEAD, TITLE, TR. The property has no default value.

Dat word hele table vervangen of via dom

[crisp]

goh, dus de implementatie van deze van origine IE-propriety extension is in andere browsers zelfs beter dan in IE zelf

[Verwijderd]

Vae Victis schreef op zondag 30 april 2006 @ 22:42:
[...]

Dat word hele table vervangen of via dom

Jammer hele table vervangen is niet netjes en onflexibel maar ik heb nog niet genoeg met het DOM gewerkt om dit soort handelingen hiermee te verrichten. Het was namelijk de bedoeling om met een AJAX (eigenlijk AJAH) de tbody te vullen met nieuwe rijen die op alfabet staan.

Wat mij het meest netjes lijkt is dat ik nu zo ga scripten, dat via het DOM de nieuwe rij ingevoegd gaat worden, en dat deze rij dan de hele tabel afgaat op welke positie de nieuwe rij moet komen. Gaat een hele klus worden

In ieder geval bedankt voor de quote, waar had je die eigenlijk vandaan?

[ Voor 2% gewijzigd door Verwijderd op 30-04-2006 22:52 . Reden: ok laat maar, wist niet dat die onderstreepte kop clickable was ;) ]

[JHS]

Als je op het linkje had geklikt had je gezien dat het op de MSDN staat . Ook wel zo te doorzoeken. Maar het is ook gewoon de eerste hit op Google

[SchizoDuckie]

dit helpt je vast wel een eindje op weg (bruute kut-n-peest uit een shoppingcart scriptje van mezelf)

JavaScript:

shoppingCart.fillCart = function(input) // nasty (but fast) fix for internet explorer not knowing TBODY...
{
    var tr, td;
    var docFragment = document.createDocumentFragment();
    var carttable = document.getElementById('carttable');
    var currentcart = document.getElementById('cartitems'); 
    var newcart= document.createElement('tbody');
    newcart.id = 'cartitems';
    
    for (var j = 0; j < input.length; j++) 
    {
        tr = document.createElement('tr');
        for (var k = 0; k< 3; k++)
        {
            td = document.createElement('td');
            td.innerHTML = input[j][k];
            td.className = cartRowClasses[k];
            tr.appendChild(td);
        }               
        docFragment.appendChild(tr);
    }
    newcart.appendChild(docFragment); 
    carttable.replaceChild(newcart, currentcart); // huub-huub, barbatruuk
}

hope that helps

[SchizoDuckie]

Even voor de search:

Ik wilde zojuist ditzelfde bereiken zonder een array van values mee te passen, maar gewoon met AHAH een bak met innerHTML aan een tbody gooien.

De oplossing is even sim-pel als briljant en werkt in IE en FF

code:

function updateDivTable(newInnerHTML, theTargetTbody)
{
    var divElm = document.createElement('DIV'); // maak nieuw tempdivje
    divElm.innerHTML = newInnerHTML; // plemp innerhtml erin
    document.body.appendChild(divElm); // hang aan body
    
    Rows = divElm.getElementsByTagName('TR'); // zoek alle TRs daaruit
    for (i=0; i<=Rows.length; i++)
    {
      try { document.getElementById(theTargetTbody).appendChild(Rows[i]); } catch (E) {} // hang aan tbody elm en onderdruk fouten van IE
    }
    document.body.removeChild(divElm); // haal tempdivje weer weg
  }

[Verwijderd]

Zo. Even een oude verdronken koe reanimeren.

Ik heb het bovenstaande als workaround geprobeerd, maar (wonder boven wonder) doet IE niet het verwachte. (6 SP2)

getElementsByTagName geeft altijd 1 item te weinig.

Onderstaande voorbeeld geeft 0 en 1.

Is er nog een workaround, om de bug die de workaround onmogelijk maakt, around te worken?

code:

<HTML>
<BODY>

<div id="test"></div>


<script>

var tr1 = "<tr><td>kaas</td>";
var tr2 = "<tr><td>kaas</td></tr><tr><td>kaas</td></tr>";

var difje = document.getElementById('test');

difje.innerHTML = tr1;
var Rows = difje.getElementsByTagName('TR');
alert( "TRs in tr1: " + Rows.length );

difje.innerHTML = tr2;
var Rows = difje.getElementsByTagName('TR');
alert( "TRs in tr2: " + Rows.length );

</script>


</BODY>
</HTML>

[Crayne]

Als je de innerHTML laat alerten zie je dat hij de eerste <tr><td> stript.

Edit: het komt omdat je niet ook table tags rond die trs zet.

JavaScript:

<script type="text/javascript">

var tr1 = "<table><tr><td>kaas</td></tr></table>";
var tr2 = "<table><tr><td>kaas</td></tr><tr><td>kaas</td></tr></table>";

var difje = document.getElementById('test');

difje.innerHTML = tr1;
var Rows = difje.getElementsByTagName('TR');
alert( "TRs in tr1: " + Rows.length );

difje.innerHTML = tr2;
var Rows = difje.getElementsByTagName('TR');
alert( "TRs in tr2: " + Rows.length );

</script>

[ Voor 74% gewijzigd door Crayne op 21-12-2006 12:22 ]

[crisp]

persoonlijk zou ik voor deze workaround dan ook dit doen:

JavaScript:

difje.innerHTML = '<table>' + tr1 + '<\/table>';

Een parser kan en mag een TR-element buiten TABLE-context negeren.

[Isnowiz]

Doe wat SchizoDuckie zegt...

[Verwijderd]

crisp schreef op donderdag 21 december 2006 @ 12:22:
persoonlijk zou ik voor deze workaround dan ook dit doen:

JavaScript:

difje.innerHTML = '<table>' + tr1 + '<\/table>';

Een parser kan en mag een TR-element buiten TABLE-context negeren.

Misschien een domme vraag. Maar waarom staat de \ voor de / bij de sluit tag van table

[sQuarecoW]

Verwijderd schreef op donderdag 21 december 2006 @ 12:32:
[...]


Misschien een domme vraag. Maar waarom staat de \ voor de / bij de sluit tag van table

Omdat het javascript is en je de / moet escapen (dmv een \ dus)

[Verwijderd]

sQuarecoW schreef op donderdag 21 december 2006 @ 14:05:
[...]


Omdat het javascript is en je de / moet escapen (dmv een \ dus)

hoezoe? sinds wanneer moet je de / escapen?
als ik het volgende statement uitvoer doet hij het toch ook gewoon

JavaScript:

<script type="text/javascript">
alert('</table>');
</script>

omdat ik ging twijfelen aan mezelf heb ik nog een dom script geschreven ook
http://jnwmedia.nl/test.php

[ Voor 13% gewijzigd door Verwijderd op 21-12-2006 15:24 ]

[crisp]

Verwijderd schreef op donderdag 21 december 2006 @ 15:13:
[...]


hoezoe? sinds wanneer moet je de / escapen?
als ik het volgende statement uitvoer doet hij het toch ook gewoon

JavaScript:

<script type="text/javascript">
alert('</table>');
</script>

omdat ik ging twijfelen aan mezelf heb ik nog een dom script geschreven ook
http://jnwmedia.nl/test.php

Strict gezien moet een HTML parser het script-block verlaten op het moment dat het '</' tegenkomt gevolgd door een name-character. De meeste browsers check echter eerst nog de tagname die volgt en verlaten pas het scriptblock als er '</script' staat.

Je mag dat in twijfel trekken, maar de validator zal het vast wel met me eens zijn
Note dat dit alleen geldt voor inline scripts, maar vanwege consistentie escape ik altijd forward-slashes in javascript strings.

edit: HTML 4.01 reference hierover

[ Voor 14% gewijzigd door crisp op 21-12-2006 15:46 ]

[Verwijderd]

crisp schreef op donderdag 21 december 2006 @ 15:40:
[...]

Weer wat geleerd thx