Заглавная страница
Избранные статьи
Случайная статья
Познавательные статьи
Новые добавления
Обратная связь
FAQ
Написать работу

ТОП 10 на сайте

Приготовление дезинфицирующих растворов различной концентрации

Техника нижней прямой подачи мяча.

Франко-прусская война (причины и последствия)

Организация работы процедурного кабинета

Смысловое и механическое запоминание, их место и роль в усвоении знаний

Коммуникативные барьеры и пути их преодоления

Обработка изделий медицинского назначения многократного применения

Образцы текста публицистического стиля

Четыре типа изменения баланса

Задачи с ответами для Всероссийской олимпиады по праву

Мы поможем в написании ваших работ!

ЗНАЕТЕ ЛИ ВЫ?

Влияние общества на человека

Приготовление дезинфицирующих растворов различной концентрации

Практические работы по географии для 6 класса

Организация работы процедурного кабинета

Изменения в неживой природе осенью

Уборка процедурного кабинета

Сольфеджио. Все правила по сольфеджио

Балочные системы. Определение реакций опор и моментов защемления

Главная Избранные Случайная статья Познавательные Новые добавления Обратная связь FAQ Написать работу

Добавление и удаление элементов DOM

↑

⇐ ПредыдущаяСтр 6 из 7Следующая ⇒

Чтобы создать новый элемент - используется метод document.createElement(тип). Для того, чтобы элемент увидеть на странице, его необходимо добавить в дерево DOM. Это можно сделать методом appendChild, который в DOM есть у любого элемента.

В следующем примере в конец дерева DOM (в конец страницы) добавляется строка текста:

<html>

<head>

function go () {

var newDiv = document.createElement ( "div" ); //создание элемента

newDiv.innerHTML = "Привет, мир!"; //установка свойств нового элента

newDiv.style.backgroundColor = "red";

document.body.appendChild ( newDiv ) //добавление нового элемента в дерево

}

</script>

</head>

<body>

Текст

</body>

</html>

Новый элемент можно добавить не в конец детей, а перед нужным элементом. Для этого используется метод insertBefore родительского элемента. Он работает так же, как и appendChild, но принимает вторым параметром элемент, перед которым нужно вставлять.

<html>

<head>

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>

</body>

</html>

Чтобы убрать узел из документа - достаточно вызвать метод removeChild из его родителя. Если родитель элемента неизвестен, то его легко получить при помощи функции parentNode. Следующий пример реализует добавление элемента и его удаление двумя способами.

<html>

<head>

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>

Текст

</body>

</html>

В следующем примере продемонстрировано добавление элемента маркированного списка и удаление произвольного элемента списка:

<html>

<head>

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>

<form>

</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>

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>

Таблица:

<tr>

<th> Номер </th>

<th> Значение </th>

<th> Отметить </th>

</tr>

<table>

<br>

<form>

</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

⇐ Предыдущая 1 2 3 4 567 Следующая ⇒

Познавательные статьи:

Психологические особенности спортивного соревнования

Приготовление дезинфицирующих растворов различной концентрации

Занятость населения и рынок труда

Социальный статус семьи и её типология

Последнее изменение этой страницы: 2016-09-13; просмотров: 525; Нарушение авторского права страницы; Мы поможем в написании вашей работы!

infopedia.su Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав. Обратная связь - 216.73.216.156 (0.006 с.)