Cookies op Tweakers

Tweakers maakt gebruik van cookies, onder andere om de website te analyseren, het gebruiksgemak te vergroten en advertenties te tonen. Door gebruik te maken van deze website, of door op 'Ga verder' te klikken, geef je toestemming voor het gebruik van cookies. Wil je meer informatie over cookies en hoe ze worden gebruikt, bekijk dan ons cookiebeleid.

Meer informatie

[Javascript] tbody innerhtml onder IE

Pagina: 1
Acties:

  • 35517
  • Registratie: september 2001
  • Niet online
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:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<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
  • Registratie: augustus 2003
  • Laatst online: 18-10 15:40

JHS

Splitting the thaum.

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

DM!


  • Vae Victis
  • Registratie: april 2001
  • Laatst online: 09:15

Vae Victis

Dark Lord of the Sith

quote:
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
  • Registratie: februari 2000
  • Laatst online: 09:16

crisp

Devver

Pixelated

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

Intentionally left blank


  • 35517
  • Registratie: september 2001
  • Niet online
quote:
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?

35517 wijzigde deze reactie 30-04-2006 22:52 (2%)
Reden: ok laat maar, wist niet dat die onderstreepte kop clickable was ;)


  • JHS
  • Registratie: augustus 2003
  • Laatst online: 18-10 15:40

JHS

Splitting the thaum.

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

DM!


Acties:
  • 0Henk 'm!

  • SchizoDuckie
  • Registratie: april 2001
  • Laatst online: 23-05 11:37
dit helpt je vast wel een eindje op weg :) (bruute kut-n-peest uit een shoppingcart scriptje van mezelf)
JavaScript:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
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 :)

Ik doe wel eens iets met fotos - DuckieTV - Mis niets meer van je favoriete TV-Series!


  • SchizoDuckie
  • Registratie: april 2001
  • Laatst online: 23-05 11:37
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 8)
code:
1
2
3
4
5
6
7
8
9
10
11
12
13
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
  }

Ik doe wel eens iets met fotos - DuckieTV - Mis niets meer van je favoriete TV-Series!


  • Oersoep
  • Registratie: augustus 2003
  • Laatst online: 28-12-2007
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:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<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>

Oersoep. De über-unter-dog.


  • Crayne
  • Registratie: januari 2002
  • Laatst online: 02-10-2017

Crayne

Have testicles, will travel

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:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<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>

Crayne wijzigde deze reactie 21-12-2006 12:22 (74%)

Mijn Library Thing catalogus


  • crisp
  • Registratie: februari 2000
  • Laatst online: 09:16

crisp

Devver

Pixelated

persoonlijk zou ik voor deze workaround dan ook dit doen:
JavaScript:
1
difje.innerHTML = '<table>' + tr1 + '<\/table>';

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

Intentionally left blank


  • tvdijen
  • Registratie: mei 2005
  • Laatst online: 17-10 14:27
Doe wat SchizoDuckie zegt...

  • Par0xysm
  • Registratie: februari 2003
  • Laatst online: 26-03-2014
quote:
crisp schreef op donderdag 21 december 2006 @ 12:22:
persoonlijk zou ik voor deze workaround dan ook dit doen:
JavaScript:
1
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

-=blaat=-


  • sQuarecoW
  • Registratie: juli 2003
  • Laatst online: 18-10 17:11
quote:
Par0xysm 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)

  • Par0xysm
  • Registratie: februari 2003
  • Laatst online: 26-03-2014
quote:
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:
1
2
3
<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

Par0xysm wijzigde deze reactie 21-12-2006 15:24 (13%)

-=blaat=-


  • crisp
  • Registratie: februari 2000
  • Laatst online: 09:16

crisp

Devver

Pixelated

quote:
Par0xysm 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:
1
2
3
<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

crisp wijzigde deze reactie 21-12-2006 15:46 (14%)

Intentionally left blank


  • Par0xysm
  • Registratie: februari 2003
  • Laatst online: 26-03-2014

-=blaat=-

Pagina: 1


Apple iPhone XS Red Dead Redemption 2 LG W7 Google Pixel 3 XL OnePlus 6T FIFA 19 Samsung Galaxy S10 Google Pixel 3

Tweakers vormt samen met Tweakers Elect, Hardware.Info, Autotrack, Nationale Vacaturebank en Intermediair de Persgroep Online Services B.V.
Alle rechten voorbehouden © 1998 - 2018 Hosting door True