Динамическое добавление элементов
Очень часто при разработке пользовательского веб интерфейса приходится дабы не замусоривать формы делать динамически генерируемые элементы. В данном примере я хочу показать, как динамически добавлять и удалять строки с помощью appendChild и removeChild методов.
Начнём сразу с примера.
У нас есть контейнер с id = event в нём содержится пока что ещё один контейнер с id = event_line который мы и будем копировать и конечно кнопка добавления и удаления строки. Выглядеть это будет вот так:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <style> .event_line { border-left:1px solid #000000; border-top:1px solid #000000; border-bottom:1px solid #000000; } .event_line input { border-right:1px solid #000000; width:102px; } .event div { border:1px solid #000000; width:100px; height:45px; float:left; } </style> <div id="event"> <div class="event_line"><input name="event_1_line" type="text"><input name="event_2_line" type="text"><input value="X" style="width: 15px;" type="button"></div> </div> <br clear="all"> <input onclick="add()" value="Добавить строку" |
Для начала напишем функцию для удаления одной строчки.
Для этого просто в экшен onclick добавим следующий текст
1 | onclick="this.parentNode.parentNode.removeChild(this.parentNode)" |
Как это работает? При нажатии на кномку «Удалить строку» вызовется следующее действие:
this — точка входа в объект на себя
parentNode — переставляем селектор в точку на уровень выше div class=»event_line»
parentNode — переставляем селектор ещёё на один уровень выше div id=»event»
removeChild(this.parentNode) — удаляем дочерний объект от текущего уровня this+уровень div class=»event_line» внутри контейнера div id=»event»
По началу достаточно тяжело понять как это работает, но всё приходит с опытом.
Теперь сделаем функцию добавления объекта в контейнер
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | <script type="text/javascript"> function add() { var obj=document.getElementById('event'); // селектим нужный нам объект для удобства var text=document.createElement('DIV'); // создаём новый контейнер text.className='event_line'; // добавляем класс к контейнеру text.innerHTML='<input type="text" name="event_1_line">'+ '<input type="text" name="event_2_line">'+ '<input type="button" onclick="this.parentNode.parentNode.removeChild(this.parentNode)" value="X" style="width:15px">'; // вставляем нужные нам пустые строки в контейнер obj.appendChild(text); // вставляем дочений объект (контейнер) в ранее выбранный объект } </script> <style> .event_line { border-left:1px solid #000000; border-top:1px solid #000000; border-bottom:1px solid #000000; } .event_line input { border-right:1px solid #000000; width:102px; } .event div { border:1px solid #000000; width:100px; height:45px; float:left; } </style> <div id="event"> <div class="event_line"><input name="event_1_line" type="text"><input name="event_2_line" type="text"><input onclick="this.parentNode.parent |
Вот таким вот способом делается вставка строк 
Частые ошибки:
При написании подожного рода скриптов не следует использоваться для склейки innerHTML так как пр иэтом все введённые в форму данные теряются, именно по этому следует использовать appendChild
4 комментариев на "Динамическое добавление элементов"
В вашем примере все новые инпуты тоже теряються при отправе формы
Поправка к коменту выше:
теряются инпуты в мозиле и опере.. в ослике работает нормально
Простите, поспешил..то у меня косяки были ))
это вообщето общий пример, а теряются они потому, что нэймы то у них одинаковые.. надо генерировать новый нэйм, с какимнить индексом на 1 больше например. могу показать страницу где это работает
Продолжение дискуссии на форуме: link
Вы можете продолжить обсуждение этой статьи на форуме