Заглавная страница Избранные статьи Случайная статья Познавательные статьи Новые добавления Обратная связь FAQ Написать работу КАТЕГОРИИ: АрхеологияБиология Генетика География Информатика История Логика Маркетинг Математика Менеджмент Механика Педагогика Религия Социология Технологии Физика Философия Финансы Химия Экология ТОП 10 на сайте Приготовление дезинфицирующих растворов различной концентрацииТехника нижней прямой подачи мяча. Франко-прусская война (причины и последствия) Организация работы процедурного кабинета Смысловое и механическое запоминание, их место и роль в усвоении знаний Коммуникативные барьеры и пути их преодоления Обработка изделий медицинского назначения многократного применения Образцы текста публицистического стиля Четыре типа изменения баланса Задачи с ответами для Всероссийской олимпиады по праву Мы поможем в написании ваших работ! ЗНАЕТЕ ЛИ ВЫ?
Влияние общества на человека
Приготовление дезинфицирующих растворов различной концентрации Практические работы по географии для 6 класса Организация работы процедурного кабинета Изменения в неживой природе осенью Уборка процедурного кабинета Сольфеджио. Все правила по сольфеджио Балочные системы. Определение реакций опор и моментов защемления |
Добавление и удаление элементов DOMСодержание книги
Похожие статьи вашей тематики
Поиск на нашем сайте
Чтобы создать новый элемент - используется метод document.createElement(тип). Для того, чтобы элемент увидеть на странице, его необходимо добавить в дерево DOM. Это можно сделать методом appendChild, который в DOM есть у любого элемента. В следующем примере в конец дерева DOM (в конец страницы) добавляется строка текста: <html> <head> <script> function go () { var newDiv = document.createElement ( "div" ); //создание элемента newDiv.innerHTML = "Привет, мир!"; //установка свойств нового элента newDiv.style.backgroundColor = "red"; document.body.appendChild ( newDiv ) //добавление нового элемента в дерево } </script> </head> <body> Текст <input type= "button" onclick= "go()" value= "Go" /> </body> </html> Новый элемент можно добавить не в конец детей, а перед нужным элементом. Для этого используется метод insertBefore родительского элемента. Он работает так же, как и appendChild, но принимает вторым параметром элемент, перед которым нужно вставлять. <html> <head> <script> function go () { var newDiv = document.createElement ( "div" ); //создание нового элемента var oldDiv = document.getElementById ( "id1" ); //получение существующего элемента newDiv.innerHTML = "Привет, мир!"; //установка свойств нового элемента newDiv.style.backgroundColor = "blue"; document.body.insertBefore ( newDiv, oldDiv ) //добавление нового элемента перед существующим } </script> </head> <body> <div id= "id1" > Текст </div> <input type= "button" onclick= "go()" value= "Go" /> </body> </html> Чтобы убрать узел из документа - достаточно вызвать метод removeChild из его родителя. Если родитель элемента неизвестен, то его легко получить при помощи функции parentNode. Следующий пример реализует добавление элемента и его удаление двумя способами. <html> <head> <script> function add () { var newDiv = document.createElement ( "div" ); //создание нового элемента newDiv.innerHTML = "Привет, мир!"; //установка свойств нового элемента newDiv.style.backgroundColor = "green"; newDiv.id = "id1"; document.body.appendChild ( newDiv ) //добавление нового элемента } function del1 () { var toDel = document.getElementById ( "id1" ); //получение элемента для удаления document.body.removeChild ( toDel ) //удаление элемента как потомка body } function del2 () { var toDel = document.getElementById ( "id1" ); //получение элемента для удаления toDel.parentNode.removeChild ( toDel ) //удаление элемента как потомка своего родителя } </script> </head> <body> Текст <input type= "button" onclick= "add()" value= "Добавить" /> <input type= "button" onclick= "del1()" value= "Удалить1" /> <input type= "button" onclick= "del2()" value= "Удалить2" /> </body> </html> В следующем примере продемонстрировано добавление элемента маркированного списка и удаление произвольного элемента списка: <html> <head> <script> function add ( form ) { var newDiv = document.createElement ( "li" ); //создание нового элемента списка <li> newDiv.innerHTML = form.about.value + "<input type=\"button\" onclick=\"del(this)\" value=\"Удалить\"/>"; newDiv.style.backgroundColor = "#3FD3A7"; //установка свойств нового элемента var list = document.getElementById ( "list1" ); //получение элемента-списка по id list.appendChild ( newDiv ) //добавление нового элемента } function del ( toDel ) { //toDel - передаваемый элемент <input> var toDel_parent = toDel.parentNode; //получение дочернего элемента - <li>, куда входит передаваемый <input> toDel_parent.parentNode.removeChild ( toDel_parent ) //удаление элемента <li> как потомка своего родителя } </script> </head> <body> Список: <ul id= "list1" > </ul> <form> <input type= "text" name= "about" > <input type= "button" onclick= "add(this.form)" value= "Добавить" /> </form> </body> </html>
4.3.7. Работа с таблицами в DOM Таблица и ее элементы (строки, столбцы) также являются объектами дерева DOM и поддерживают все методы работы с ним. Кроме того, у таблиц (объект HTMLTableElement) есть дополнительные средства навигации и доступа к элементам. table.rows[] – список строк таблицы; tr.cells[] – список ячеек строки; tr.rowIndex – номер строки; td.cellIndex – номер ячейки в строке. Можно получить количество строки таблицы и количество ячеек в строке: table.rows.length – количество строк таблицы; tr.cells.length – количество ячеек в строке. Для добавления и удаления элементов таблицы можно воспользоваться функциями: table.insertRow( индекс_строки ) – вставка строки; table.deleteRow( индекс_строки ) – удаление строки; tr.insertCell( индекс_строки ) – вставка ячейки в строку. tr.deleteCell( индекс_ячейки ) – удаление ячейки в строке. В следующем примере реализован сценарий добавления и удаления данных в таблицу: <html> <head> <script> function add ( form ) { table1 = document.getElementById ( 'mytable' ); //получение таблицы по имени row1 = table1.insertRow ( table1.rows.length ); //вставка строки в таблицу cell1 = row1.insertCell ( row1.cells.length ); //вставка 1-ой ячейки в строку cell1.innerHTML = row1.rowIndex; //добавление номера строки в первую ячейку cell1 = row1.insertCell ( row1.cells.length ); //вставка 2-ой ячейки в строку if ( form.info.value != "" ) cell1.innerHTML = form.info.value //вставка данных в ячейку else cell1.innerHTML = "default"; cell1 = row1.insertCell ( row1.cells.length ); //вставка 3-ей ячейки в строку cell1.innerHTML = "<input type=\"checkbox\" name=\"check\">"; //добавление чекбокса в ячейку } function del ( form ) { table1 = document.getElementById ( 'mytable' ); //получение таблицы по имени var i = table1.rows.length; //получение кол-ва строк в таблице while ( i --) { //цикл перебора строк var row1 = table1.rows [ i ] //получение текущей строки if ( row1.cells [ 2 ]. childNodes [ 0 ]. checked ){ //если отмечен чекбокс текущей строки table1.deleteRow ( row1.rowIndex ); //удалить текущую строку } } } </script> </head> <body> Таблица: <table id= "mytable" border= "1" > <tr> <th> Номер </th> <th> Значение </th> <th> Отметить </th> </tr> <table> <br> <form> <input type= "text" name= "info" > <input type= "button" onclick= "add(this.form)" value= "Добавить" /><br> <input type= "button" onclick= "del(this.form)" value= "Удалить отмеченные" /> </form> </body> </html>
http://javascript.ru/forum/events/4237-dinamicheskoe-udalenie-strok-tablicy.html http://javascript.ru/forum/events/2799-problemy-s-insertrow-i-insertcell.html
|
||||
Последнее изменение этой страницы: 2016-09-13; просмотров: 416; Нарушение авторского права страницы; Мы поможем в написании вашей работы! infopedia.su Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав. Обратная связь - 18.222.117.15 (0.01 с.) |