Добавление и удаление элементов
Одной из задач, которая становится все более распространенной в современных приложениях JavaScript, является возможность добавления или удаления элементов страницы. JavaScript позволяет обойти эту проблему, делая возможным динамическое дополнение и удаление содержимого страницы.
Чтобы создать новый элемент - используется метод document.createElement(тип). var newDiv = document.createElement('div')
Добавить новый элемент к существующему элементу можно методом appendChild
Чтобы убрать узел из документа - достаточно вызвать метод removeChild из его родителя.
Методом removeAttribute(attribute) удаляет атрибут attribute объекта.
| 1 var inputs = 0; 2 function addContact(){ 3 var table = document.getElementById('contacts'); 5 var tr = document.createElement('TR'); 6 var td1 = document.createElement('TD'); 7 var td2 = document.createElement('TD'); 8 var td3 = document.createElement('TD'); 9 var inp1 = document.createElement('INPUT'); 10 var inp2 = document.createElement('INPUT'); 12 if(inputs>0){ 13 var img = document.createElement('IMG'); 14 img.setAttribute('src', 'delete.gif'); 15 img.onclick = function(){ 16 removeContact(tr); 17 } 18 td1.appendChild(img); 19 } 21 inp1.setAttribute("Name", "Name" +inputs); 22 inp2.setAttribute("Name", "Email"+inputs); 24 table.appendChild(tr); 25 tr.appendChild(td1); 26 tr.appendChild(td2); 27 tr.appendChild(td3); 28 td2.appendChild(inp1); 29 td3.appendChild(inp2); 31 inputs++; 32 } 33 function removeContact(tr){ 34 tr.parentNode.removeChild(tr); 35 } 36 <table> 37 <tbody id="contacts"> 38 <tr> 39 <td colspan="3"><a href="javascript:addContact();">Добавьте контакт</a></td> 40 </tr> 41 <tr> 42 <td></td> 43 <td>Name </td> 44 <td>Email</td> 45 </tr> 46 </tbody> 47 </table> |
Можно видеть, что в строках сценария с 5 по 10 создается несколько элементов. В действительности создается новая строка TR, которая вставляется в таблицу в строках 37-46.
Чтобы форма была обработана правильно, все поля ввода должны иметь различные имена. Поэтому мы задаем имя двух полей ввода (21-22), а затем увеличиваем счетчик (31). Это делается с помощью еще одного нового метода setAttribute, который имеет два параметра: имя атрибута и значение атрибута.
element.setAttribute("name", "elementName")
по сути то же самое, что
element.name="elementName"
Необходимо также позаботиться о кнопке удаления. Мы уже знаем, что кнопка удаления для первой строки полей не создается, но необходимо заставить ее работать для всех остальных. Это делается в строках кода 15-16. Здесь к изображению добавлена функция onclick, которая вызывает функцию removeContact, передавая элемент TR в качестве единственного аргумента.
Взглянув на функцию removeContact, можно видеть, что сначала происходит обращение tr.parentNode к функции parentNode. Метод просто возвращает порождающий элемент для текущего элемента. Если посмотреть на изображенное ранее дерево документа, то видно, что parentNode вернет элемент непосредственно над элементом, на котором он вызван. Поэтому, если вызвать parentNode на одиночном элементе A в этом дереве, то будет получена ссылка на элемент TD над ним.
tr.parentNode возвращает ссылку на элемент TABLE. Затем вызывается метод removeChild на элементе TABLE, который просто удаляет у предка указанного потомка. Взглянув еще раз на строку 34, можно теперь увидеть: "Удалить элемент TR у его предка " или "Удалить элемент TR".
Дата добавления: 2017-02-20; просмотров: 578;