Jeśli ktoś z was próbował kiedyś dodawać elementy(np. tabelaryczne) za pomocą JS a następnie je usuwać w Internet Explorerze – wie, że to koszmar.

IE ma problem przy usuwaniu elementów poprzez pobieranie listy elementów rodzica(childNodes, czy sprawdzaniu firstChild), np.

function deleteRows(table_id) {
    var oTable = document.getElementById(table_id);
    var oTbody = document.getElementsByTagName('tbody')[0]
    while(oTbody.firstChild) {
        oTbody.removeChild(oTbody.firstChild);
    }
}

Funkcja ta usuwa wszystkie elementy tabeli, które znajdują sie w elemencie <TBODY>. Działa? Niestety nie na IE! Jak sobie poradzić?

Rozwiązanie jest jedno, mianowicie trzeba usunąć całego rodzica(np. <TBODY>). Tutaj jednak także napotkamy problem, związany z usuwaniem elementu pobranego przez document.getElementsByTagName(). Można to objeść poprzez odwołanie do elementu DOM dzięki document.getElementById().

Poniższe funkcje dodają/usuwają wiersze tabeli.

Funkcja addRows() pobiera trzy argumenty: table_id jest identyfikatorem tabeli na stronie; aList to tablica dwuwymiarowa zawierająca wiersze oraz komórki; tbody_id podawany jest tylko dla IE i jest identyfikatorem elementu <TBODY>.

Funkcja deleteRows() usuwa wiersze tabeli , której identyfikator wskazany jest w argumencie table_id; tbody_id jest identyfikatorem <TBODY> i podawany jest tylko dla przeglądarki IE.

function addRows(table_id, aList, tbody_id) {
    var oTable = document.getElementById(table_id);
    if(oTable.getElementsByTagName('tbody') > 0) {
        var oTbody = oTable.getElementsByTagName('tbody')[0]
    } else {
        var oTbody = document.createElement('tbody');
    }
    for(var i = 0; i < aList.length; i++) {
        var oRow = document.createElement('tr');
        for(var j = 0; j < aList[i].length; j++) {
            var oCell = document.createElement('td');
            var oText = document.createTextNode(aList[i][j]);
            oCell.appendChild(oText);
            oRow.appendChild(oCell);
        }
        oTbody.appendChild(oRow);
    }
    if(tbody_id) {
        oTbody.id = tbody_id;
    }
    oTable.appendChild(oTbody);
}

function deleteRows(table_id) {
    var oTable = document.getElementById(table_id);
    var oTbody = document.getElementsByTagName('tbody')[0]
    while(oTbody.firstChild) {
        oTbody.removeChild(oTbody.firstChild);
    }
}

Teraz w kodzie wystarczy tylko sprawdzić, czy mamy do czynienia z Internet Explorerem i wywoływać odpowiednio funkcje.

Voila! 🙂