[JS/DOM] IE doet moeilijk bij generen dynamische tabel

[Scott]

Ik ben me weer eens gaan wagen aan Javascript, maar ik had me natuurlijk van tevoren moeten bedenken dat IE weer moeilijk zou gaan doen. Maar goed, ik ben nu begonnen dus ik wil het ook afmaken.

Het probleem: Bij het laden van een pagina staat daar een tabel met een aantal rijen. Aan het eind van deze rijen staat twee buttons: + en - (iTunes-gebruikers kennen het wel van de smart playlists). De plus voegt een rij toe aan de tabel ná de rij waarin de button staat waarop geklikt is, de min haalt die rij weg.

Toevoegen gebeurt door middel van een functie in het onClick-event: addOption(index). De index is hierbij het rijnummer zodat ik met getElementsByTagName('tr')[index] de rij gemakkelijk op kan zoeken in addOption(). Verwijderen gebeurt op een gelijksoortige manier: removeOption(index).

Ik ben aan de slag gegaan met het DOM-object en heb daar een paar mooie functies voor gemaakt die uiteindelijk leiden tot wat ik wil. Althans, in Firefox. IE heeft er niet zo'n zin in. De functie waar het hier omgaat is denk ik mijn reIndex()-functie.

JavaScript:

<script>
function reIndex() {
    
    tbody = document.getElementById('multiple_options').getElementsByTagName('tbody')[0];
    rows = tbody.getElementsByTagName('tr');

    for (var i = 0; i < rows.length; i++) {
        
        cells = rows[i].getElementsByTagName('td');
        option = cells[0].getElementsByTagName('input')[0];
        remove = cells[1].getElementsByTagName('input')[0];
        add = cells[2].getElementsByTagName('input')[0];
    
        option.setAttribute('name', 'option['+ i +']');
        remove.setAttribute('onClick', 'removeOption(' + i +')');
        add.setAttribute('onClick', 'addOption(' + i + ')');
    }
}
</script>

Deze zorgt dat, na het toevoegen of verwijderen, de onclick-events van alle buttons weer kloppen (immers, bij het toevoegen van een rij midden in de tabel kloppen de indexnummers van de rijen daarna niet meer).

Echter, er gebeurt nu niets. Ik kan een rij toevoegen, maar de plus- en min-knoppen van die rij doen het niet. Ook het verwijderen van de toegevoegde rijen lukt niet, van de rijen die bij het laden van de pagina al aanwezig waren wel.

Omdat Internet Explorer geen foutmeldingen geeft, kan ik niet zoveel. Uiteraard heb ik gezocht: setAttribute lijkt niet echt lekker geïmplementeerd te zijn, maar setAttribute('onClick') zou het wel moeten doen (waar setAttribute('onclick') het in IE niet doet en in Firefox wel). Ik heb ook met attachEvent gewerkt, maar dat gaf hetzelfde resultaat als nu. Ik heb ook al gecontroleerd wat de waardes van de onClick-events zijn, maar kloppen gewoon (ook na toevoegen/verwijderen van rijen).

De pagina waar het omgaat heb ik online gezet zodat het misschien duidelijker wordt wat ik bedoel. De pagina werkt in Firefox dus precies zoals ik wil, in IE niet. Mocht het nodig zijn, dan kan ik ook de addOption- en removeOption-functies hier neerzetten, maar die zijn nogal groot en ik denk dat ze niet heel erg belangrijk zijn.

Een hele lap tekst, maar weet hier iemand wat ik fout doe of anders moet doen zodat het zowel in Firefox als Internet Explorer werkt ? Alvast bedankt

[dB90]

JavaScript:

        remove.onclick = removeOption(i);
        add.onclick = addOption(i);

Werkt dit?

[ Voor 5% gewijzigd door dB90 op 24-02-2008 15:31 ]

[Scott]

Ik heb het op deze manier geprobeerd (onclick moet dan wel onClick zijn). Wat ik begrepen had is dat je op die manier geen parameters kon doorgeven. Omdat dat in dit geval wel de bedoeling is, is dit een alternatief:

JavaScript:

remove.onClick = function() { removeOption(i); }
add.onClick = function() { addOption(i); }

Dit heeft echter hetzelfde resultaat als setAttribute, maakt niet uit dus.

[dB90]

Wat je zegt klopt idd was ik even vergeten. maar volgens mij moet het toch echt onclick zijn

[Bozozo]

Je bent allerlei dingen handmatig aan het doen die gewoon in alle browsers zijn geïmplementeerd.

Zie bijvoorbeeld de Mozilla reference) voor allerlei properties en methods van tables.

Daarmee kun je alle rijen en cellen benaderen, en ook toevoegen of verwijderen. Hopelijk heb je op die manier ook geen ruzie meer met IE.

edit: over parameters doorgeven: dat gaat zo niet werken denk ik. Je kunt in een onclick functie altijd 'this' benaderen, daarmee moet je het ook wel redden.

[ Voor 17% gewijzigd door Bozozo op 24-02-2008 16:49 ]

[Scott]

Ahh, da's wel een veel betere optie ja. Aan 'this' had ik niet gedacht, dat is inderdaad handig! Ik heb het nu nog precies zo werkend zoals eerst, maar reIndex() is weg en de rijen en cellen worden nu toegevoegd met insertRow en insertCell. Het enige wat nog niet goed gaat is de onclick aan de knop hangen. Ik heb het met setAttribute gedaan en met element.onClick, maar beiden werken niet in IE. Wat moet ik doen om het allemaal te laten werken ?

edit: element.onclick doet het ook niet, maar dat vind ik raar. Op deze pagina wordt ook onclick gebruikt en daarbij werkt het wel.. Het lijkt dus te komen door de button, dat moet iets anders zijn.

edit 2:

Het werkt!

JavaScript:

input.onclick = function () { addOption(this.parentNode.parentNode.rowIndex); }

did the trick.

Dank jullie zéér

[ Voor 32% gewijzigd door Scott op 24-02-2008 18:07 ]

[Bozozo]

Ik had net een voorbeeldje voor je in elkaar geflanst. Misschien kun je er nog wat mee:
Dynamische Tabel

[Scott]

Dank je, mijn uiteindelijke oplossing komt uiteindelijk op hetzelfde neer als dat van jou inderdaad