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



ЗНАЕТЕ ЛИ ВЫ?

Добавление и удаление элементов 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 с.)