Rij in tabel invoegen met JavaScript

[Johnny]

Het volgend estukje code plakt plaatst gewoon een hele <tr> binnenin een tabel met het id edit_content, maar het werkt alleen in Mozilla.

PHP:

document.getElementById('edit_content').innerHTML += '<tr id="blockRow' + id + '"><td>inhoud1</td>
<td id="outputEdit' + id + '">' + createBlock(id) + '</td><td id="previewHTML'+ id + '">inhoud3</td></tr>';

Na lang zoeken heb ik met behulp van [rml]dit topic[/rml] eindelijk "iets" kunnen maken wat wel werkt in MSIE, maar niet in Mozilla daarnaast lukt het me niet om attributen aan de tags te hangen.

PHP:

var tr = document.createElement("tr");
    
    td = document.createElement("td");
    td.innerHTML='kolom 1';
    tr.appendChild(td);

    tr.appendChild(td);
    td = document.createElement("td");
    td.innerHTML='kolom 2';
    tr.appendChild(td);
    
    td = document.createElement("td");
    td.setAttribute("style","font-weight: bold;"); //attributen werken niet???
    td.innerHTML='kolom 3';
    tr.appendChild(td);

    document.getElementById('rows').children(0).appendChild(tr); //children geeft een fout in Mozilla!

Weet iemand een manier om een rij aan een tabel toe te voegen die in beide browsers werkt?

[André]

td.setAttribute("style", "bla") word td.style = "bla" of td.styleClass = "blaClass".

En je kunt eens zoeken op childNodes en appendChild.

[ Voor 20% gewijzigd door André op 28-12-2003 13:52 ]

[Skaah]

André schreef op 28 december 2003 @ 13:52:
td.setAttribute("style", "bla") word td.style = "bla" of td.styleClass = "blaClass".

En je kunt eens zoeken op childNodes en appendChild.

vo: el.style.background = '#ffffff'; en, erger nog, el.setAttribute('class','eenklasse'), wordt el.className = 'eenklasse';

Ik heb wat geprutst maar geen idee hoe ik je zou kunnen helpen. Op http://webfx.eae.net is een sortable-table script, hierin worden ook rijen aan tabellen toegevoegd en gewist, werkt in Moz en IE, misschien dat je er iets mee kunt?

[ Voor 12% gewijzigd door Skaah op 28-12-2003 14:12 ]

[crisp]

crisp in "Weergeven van table in div icm HTML DOM"

voor IE zal je denk ik met insertRow en insertCell moeten werken...

[Johnny]

crisp schreef op 28 december 2003 @ 14:13:
crisp in "Weergeven van table in div icm HTML DOM"

voor IE zal je denk ik met insertRow en insertCell moeten werken...

Dus er is geen enkele manier om dit in beide browser te laten werken?

Ik namelijk een enorme hekel aan het schrijven van browserspecifieke code Daar krijg ik een Netscape 4 gevoel van.

Skaah schreef op 28 december 2003 @ 14:11:
[...]

Ik heb wat geprutst maar geen idee hoe ik je zou kunnen helpen. Op http://webfx.eae.net is een sortable-table script, hierin worden ook rijen aan tabellen toegevoegd en gewist, werkt in Moz en IE, misschien dat je er iets mee kunt?

Ik kan alleen tabellen sorteren daar, en er wordt een browsercheck gedaan.

Edit:

Ik heb inmiddels een oplossing gevonden:

PHP:

    //ranzige manier om MSIE te detecteren
    if(document.all)
        {
        document.getElementById('edit_content').children(0).appendChild(tr);
        }
    else
        {
//mozilla
        document.getElementById('edit_content').appendChild(tr);
        }

[ Voor 18% gewijzigd door Johnny op 28-12-2003 17:30 ]

[crisp]

vaag dat het wel weer via de children werkt. insertRow en insertCell zijn trouwens gewoon DOM level 1 methoden dus zouden in bijna alle browsers wel moeten werken. je zou echter ook dit kunnen doen:

JavaScript:

var table = document.getElementById('edit_content');

if (typeof table.insertRow != 'undefined') {
  table.insertRow(tr);
} else {
  table.appendChild(tr);
}

[ Voor 12% gewijzigd door crisp op 28-12-2003 18:02 ]

[creative8500]

crisp schreef op 28 december 2003 @ 18:00:
vaag dat het wel weer via de children werkt. insertRow en insertCell zijn trouwens gewoon DOM level 1 methoden dus zouden in bijna alle browsers wel moeten werken.

Ik zou het toch niet gebruiken, omdat dit specifiek op HTML is gericht. Ik zie XHTML liever puur als XML.

[crisp]

creative8500 schreef op 28 december 2003 @ 18:09:
[...]

Ik zou het toch niet gebruiken, omdat dit specifiek op HTML is gericht. Ik zie XHTML liever puur als XML.

Ik lees nergens dat het over XHTML gaat?
En ja, je kan natuurlijk wel alles liever puur als XML gaan behandelen, maar zolang er browsers zijn die daar nog geen volledige of brakke support voor bieden dan wordt je toch wel gedwongen om je toevlucht te nemen tot minder mooie oplossingen. Het is de praktijk die bepaalt welke technieken je zal moeten gebruiken, en daar verander je op korte termijn toch niets aan.

Ik gebruik trouwens 10x liever een DOM level 1 methode die in alle browsers werkt dan een DOM level 2 methode die ik met allerlei hacks weer in IE werkend moet zien te krijgen. Schoonheid is maar 1 streven; overzichtelijkheid en onderhoudbaar echter ook.

[ Voor 6% gewijzigd door crisp op 28-12-2003 18:23 ]

[Anoniem: 2935]

Johnny schreef op 28 december 2003 @ 13:44:

JavaScript:

td.innerHTML='kolom 1';

Als je toch met DOM-methodes probeert te werken, gebruik innerHTML dan liever helemaal niet:

JavaScript:

td.appendChild(
    document.createTextNode('kolom 1')
    );

Toch snap ik je probleem niet helemaal; welke dingen werken nou niet in zowel IE als Mozilla?

[creative8500]

Anoniem: 2935 schreef op 28 december 2003 @ 19:55:

JavaScript:

td.appendChild(
    document.createTextNode('kolom 1')
    );

Appenden is niet hetzelfde als alle childnodes replacen. Wat je nu doet is:

code:

oudeNode += 'kolom 1'-textnode;
// in plaats van:
oudeNode  = 'kolom 1'-textnode;

_{Je zou het zelf ook direct zien als je nogmaals gekeken had, maar iemand moet het toch opmerken...}

[crisp]

creative8500 schreef op 28 december 2003 @ 20:15:
[...]

Appenden is niet hetzelfde als alle childnodes replacen. Wat je nu doet is:

code:

oudeNode += 'kolom 1'-textnode;
// in plaats van:
oudeNode  = 'kolom 1'-textnode;

_{Je zou het zelf ook direct zien als je nogmaals gekeken had, maar iemand moet het toch opmerken...}

Als je het volgende hebt:

HTML:

<td></td>

zal je toch echt eerst een textNode moeten creëeren

[creative8500]

crisp schreef op 28 december 2003 @ 20:23:
zal je toch echt eerst een textNode moeten creëeren

Ik snap je niet? Ik reageer op blues die een alternatief aanbied, die niet dezelfde uitwerking heeft. Nu zeg jij dat je toch eerst een textnode moet creëeren; allereerst heb ik niet beweerd dat je géén textnode moet creëeren, en ten tweede: wáárvoor moet je een tekstnode creëeren?

[crisp]

creative8500 schreef op 28 december 2003 @ 20:30:
[...]

Ik snap je niet? Ik reageer op blues die een alternatief aanbied, die niet dezelfde uitwerking heeft. Nu zeg jij dat je toch eerst een textnode moet creëeren; allereerst heb ik niet beweerd dat je géén textnode moet creëeren, en ten tweede: wáárvoor moet je een tekstnode creëeren?

Blues biedt een alternatief voor:

JavaScript:

td.innerHTML='kolom 1';

waarop jij (terecht) opmerkt dat een textNode appenden niet dezelfde uitwerking heeft, omdat je dan immers alleen toevoegd. Echter ervan uitgaan dat er ueberhaupt al een textNode aanwezig is zou je eerst moeten verifiëren voordat je met textNodes gaat stoeien - mocht er nog geen textNode zijn, dan zal je 'm toch eerst moeten appenden - en daar doelde ik eigenlijk op....

[creative8500]

crisp schreef op 28 december 2003 @ 21:27:
[...]

Blues biedt een alternatief voor:

JavaScript:

td.innerHTML='kolom 1';

waarop jij (terecht) opmerkt dat een textNode appenden niet dezelfde uitwerking heeft, omdat je dan immers alleen toevoegd. Echter ervan uitgaan dat er ueberhaupt al een textNode aanwezig is zou je eerst moeten verifiëren voordat je met textNodes gaat stoeien - mocht er nog geen textNode zijn, dan zal je 'm toch eerst moeten appenden - en daar doelde ik eigenlijk op....

Oh, ik vat je Maar ik bedoelde niet specifiek een tekstnode replacen voor een andere node, ik bedoelde alle childnodes die de node heeft replacen. En nu weer ontopic.

[crisp]

dat met die children(0) - zou dat betekenen dat IE ook altijd een TBODY append als je een table creëerd?

[creative8500]

crisp schreef op 28 december 2003 @ 22:17:
dat met die children(0) - zou dat betekenen dat IE ook altijd een TBODY append als je een table creëerd?

Lijkt me sterk, maar dat kun je weer erg makkelijk met innerHTML nakijken

edit: een testcase gemaakt, en het is inderdaad zo:

code:

<html>
    <head>
        <script type="text/javascript">
        window.onload = function ()
        {
            var tr = document.createElement("tr");

            td = document.createElement("td");
            td.innerHTML='kolom 1';
            tr.appendChild(td);

            tr.appendChild(td);
            td = document.createElement("td");
            td.innerHTML='kolom 2';
            tr.appendChild(td);

            td = document.createElement("td");
            td.setAttribute("style","font-weight: bold;");
            td.innerHTML='kolom 3';
            tr.appendChild(td);

            document.getElementById('rows').children(0).appendChild(tr);
        }
        </script>
    </head>
    <body>
        <p onclick="alert (document.getElementById('rows').innerHTML);">
            alert (document.getElementById('rows').innerHTML);
        </p>
        <table id="rows"></table>
    </body>
</html>

De alert geeft:

code:

<TBODY>
<TR>
<TD>kolom 1</TD>
<TD>kolom 2</TD>
<TD>kolom 3</TD></TR></TBODY>

[ Voor 80% gewijzigd door creative8500 op 28-12-2003 22:38 ]

[crisp]

da's dus bij een bestaande table, als ik een hele nieuwe table wil maken slikt hij dit niet, terwijl de alert geen TBODY geeft:

JavaScript:

  var table = document.createElement('TABLE');
  table.id = 'mytable';
  var tr = document.createElement('TR');
  var td = document.createElement('TD');
  var text = document.createTextNode('test');
  td.appendChild(text);
  tr.appendChild(td);
  tr.appendChild(td.cloneNode(true));
  tr.appendChild(td.cloneNode(true));
  table.appendChild(tr);
       
  document.body.appendChild(table);

  alert(document.getElementById('mytable').innerHTML);

misschien moet je voor IE wel expliciet eerst een TBODY appenden...

edit: inderdaad, want dit werkt wel:

JavaScript:

  var table = document.createElement('TABLE');
  table.id = 'mytable';
  var tbody = document.createElement('TBODY');
  var tr = document.createElement('TR');
  var td = document.createElement('TD');
  var text = document.createTextNode('test');
  td.appendChild(text);
  tr.appendChild(td);
  tr.appendChild(td.cloneNode(true));
  tr.appendChild(td.cloneNode(true));
  tbody.appendChild(tr);
  table.appendChild(tbody);

  document.body.appendChild(table);

gekke browser dat IE

[ Voor 31% gewijzigd door crisp op 28-12-2003 22:50 ]