Добавление и удаление элементов
Одной из задач, которая становится все более распространенной в современных приложениях JavaScript, является возможность добавления или удаления элементов страницы. Предположим, что имеется форма, которая позволяет послать кому-нибудь ссылку. Обычно используется одно поле ввода для адреса e-mail и второе - для имени получателя. Если требуется послать ссылку нескольким адресатам, то либо придется посылать форму несколько раз, либо можно было бы разместить на странице более одного набора полей имя/e-mail. Но в этом случае мы все еще ограничены заданным числом контактов. Если имеется пространство для 5 контактов и необходимо послать ссылку 20 людям, то форму придется заполнять 4 раза.
JavaScript позволяет обойти эту проблему, делая возможным динамическое дополнение и удаление содержимого страницы:
1 var inputs = 0; 2 function addContact(){ 3 var table = document.getElementById('contacts'); 4 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'); 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("Name", "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); 39 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>
Нравится платная медицина? Проверьте отзывы о ООО СМ-клинике в Питере. Женская одежда оптом - продажа на Украину, Харьков и другие города. Выгодные цены и условия.
Forekc.ru
Рефераты, дипломы, курсовые, выпускные и квалификационные работы, диссертации, учебники, учебные пособия, лекции, методические пособия и рекомендации, программы и курсы обучения, публикации из профильных изданий