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)
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! 🙂
A nie lepiej skorzystać z jakiegoś frameworka js(np. prototype)?
Hmm.. jquery?
Kiedyś nie istniały żadne frameworki JS i trzeba było sobie radzić 🙂 Warto dla treningu czasami porozwiązywać takie problemy bez pomocy narzędzi trzecich 😉
Tak, tak, najlepiej kazać userowi ściągać 1 MiB JavaScriptu tylko po to, żeby wywołać dziesięciolinijkową funkcję.
Dzięki,przerabiałem już to..
Potem odkryłem MooTools i zycie stało się prostrze
Bigismall: to jeszcze odkryj słownik ortograficzny.
😐 Dlaczego nie moge edytowac komentarza ?
MGórny: ciekawe z jakiego frameworka korzystałeś. Takie spakowane jQuery waży jakieś 30kb, rozpakowane natomiast tylko 100kb.
Dzięki temu masz problem z kombinowaniem rozwiązany. Dodatkowo mogę się założyć, że autor musiał napisać o wiele więcej kodu niż tylko to co naskrobał, bo raczej nie pisał tylko i wyłącznie funkcji kasującej tabelki.
BTW. wiem, że pod IE (nie jestem pewien co do FF i reszty) skasowany element będzie ciągle siedział w pamięci jeśli nie wykasuje się wszystkich referencji do niego. Być może nie będzie go w DOMie, ale i tak gdzieś tam sobie będzie. Problem jest poważny, kiedy stworzy się dynamicznie kilkanaście sporych obiektów, a potem chce się coś kasować. Nie będzie go widać, ale i tak będzie w pamięci.