1. Създайте ефект на промяна на изображението

Сега, след като имате обща представа за оформлението на страницата, можете да започнете да го променяте. Нека започнем със създаване на прост ефект за промяна на изображението:

2. Добавяне и премахване на елементи

Може да не сте използвали маркера TBODY преди. Много браузъри автоматично добавят този етикет към DOM, без да ви казват. Ако искате да промените съдържанието на таблицата, всъщност трябва да промените съдържанието на TBODY. За да избегнем възможни недоразумения, ние просто добавихме етикета TBODY, така че всеки да може да го види. Всичко това може да звучи доста сложно, но тук има много малко нов материал.

Първо, тук има нова функция: document.createElement. Функцията createElement създава елемента, даден от аргумента.

Можете да видите, че няколко елемента са създадени в редове от 5 до 10 на скрипта. На практика се създава нов TR ред и се вмъква в таблицата в редове 37-46. В резултат на това новата TR линия ще изглежда така:

С други думи създадохме 7 елемента: 1 TR, 3 TD, 2 INPUT и 1 IMG. IMG тагът ще се използва като изображение на бутона „Изтриване“. Тъй като потребителят винаги трябва да вижда поне 1 ред за въвеждане, първият ред не може да бъде изтрит. Следователно, ред 12 на скрипта проверява дали първият ред е създаден. Ако редът не е първият, тогава се добавя изображение.

След създаването на всички тези елементи остава реалното им поставяне в документа. Всеки елемент на страницата има вградена функция " appendChild ", която може да се използва за добавяне на дете към този елемент. Когато се добави дете, то се добавя като последен елемент, така че ако таблицата вече има 10 TR тагове като деца, ибъде добавен още един, той ще бъде добавен като 11-ти TR таг. Започваме с получаване на препратка към таблицата (ред 3). След това добавяме TR към тази таблица (ред 24) и след това добавяме 3 TD (редове 25-27). Вторият и третият TD съдържат поле за въвеждане, така че добавяме тези полета за въвеждане (28-29).

Това е всичко! Вече имаме нов TR елемент и той е на страницата. Остава да изясним още няколко точки. За да бъде формулярът обработен правилно, всички полета за въвеждане трябва да имат различни имена. Така че именуваме двете полета за въвеждане въз основа на брояча (21-22) и след това увеличаваме брояча (31). Това се прави с друга нова функция setAttribute, която приема два параметъра: името на атрибута и стойността на атрибута. За него има допълнителна функция getAttribute, която има само един аргумент: името на атрибута, чиято стойност трябва да се получи.

element.setAttribute("name", "elementName") е по същество същото като element.name="elementName"

Въпреки това, директното задаване на атрибута, както в предишния пример, понякога може да причини някои проблеми за различни браузъри или за някои специфични атрибути. Така че докато всеки метод обикновено работи, първият метод, използващ setAttribute, е за предпочитане.

Трябва да се погрижите и за бутона за изтриване. Вече знаем, че бутонът за изтриване за първия ред от полета не е създаден, но трябва да го накараме да работи за всички останали. Това се прави в кодови редове 15-16. Тук към изображението е добавена функция onclick, която извиква функцията removeContact, предавайки елемента TR като единствен аргумент.

Така tr.parentNode връща препратка към елемента TABLE над TR. След това функцията removeChild се извиква на този елемент TABLE, който просто премахва от предшественикапосочен потомък.

Поглеждайки отново към ред 34, сега можете да видите, че той просто казва „Премахнете TR елемента от неговия предшественик“ или дори по-просто „Премахнете TR елемента“.

3. Елементи потомци

Всички наследници на даден елемент могат да бъдат достъпни с помощта на атрибута childNodes, който връща масив, съдържащ всички наследствени възли на текущия елемент.

Можете също така да използвате атрибутите firstChild и lastChild на всеки елемент, за да получите препратки към първия или последния елемент.

За да видите как работи това, нека напишем скрипт за оцветяване на редуващите се TR редове в таблица:

Разглеждайки този малък кодов фрагмент, няма какво да се обясни как може да се постигне този интересен малък ефект. Кодът започва с получаване на препратка към първия TR елемент в таблицата с помощта на метода firstChild.

След това всеки TR се оцветява на свой ред с два различни цвята с помощта на tr.style. Цветът на фона е зададен на един от двата цвята от цветовия масив. Ако броячът е четен, тогава цветът на фона е зададен на цвят1. В противен случай се дава като цвят2. Това се прави с помощта на модулен оператор (%). За тези, които са забравили, припомняме, че операцията изчислява остатъка при разделяне. 5/2 = 2 с остатък 1. Така че 5% 2 (5 по модул 2) = 1.

Промяната на стилове няма да се обсъжда тук засега, но е достатъчно да се каже, че element.style осигурява достъп до всичко, което може да се настрои с помощта на стилов лист. Ако имате нужда, например, да зададете стила на елемент, тогава можете да прочетете/напишете целия стил, като използвате element.style.cssText.

За целите на разглеждането на оператора childNodes и функцията getElementsByTagName, нека пренапишем горния пример малко по-различно:

И двете функции правят същото като първата функцияsetColors , но е написано малко по-различно. Първата функция използва атрибута childNodes.

Както беше посочено по-рано, childNodes съдържа масив, чиито елементи са деца. Така че преминаваме през tbody.childNodes и променяме цвета на всяко дете, което всички трябва да са TR елементи.

Другата функция използва новата функция getElementsByTagName, която връща масив от всички елементи с указаното име на етикет.

Тъй като имаме нужда от всички TR елементи, ние просто подаваме 'TR' на функцията и получаваме списък с всички TR елементи в таблицата. След това кодът е почти идентичен с предишната функция.