Основы программирования на JavaScript | страница 28
7 var td2 = document.createElement('TD');
8 var td3 = document.createElement('TD');
9 var inp1 = document.createElement('INPUT');
10 var inp2 = document.createElement('INPUT');
11
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 }
20
21 inp1.setAttribute("Name", "Name" +inputs);
22 inp2.setAttribute("Email", "Email"+inputs);
23
24 table.appendChild(tr);
25 tr.appendChild(td1);
26 tr.appendChild(td2);
27 tr.appendChild(td3);
28 td2.appendChild(inp1);
29 td3.appendChild(inp2);
30
31 inputs++;
32 }
33 function removeContact(tr){
34 tr.parentNode.removeChild(tr);
35 }
36
| Добавьте контакт | ||
| Name | ||
Демонстрация
Добавьте контакт
Name Email
Возможно вам не приходилось ранее использовать тег 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 строке сценария проверяется, что создается первая строка. Если строка не первая, то добавляется изображение.
