- •1.Лабораторная работа №1. Создание простых web-страниц с фреймовой структурой
- •1.1.Введение
- •1.2.Структура html-документа
- •1.3.Фреймы
- •1.4.Ссылки
- •1.5.Текст
- •1.5.1.Текстовые блоки
- •1.5.2.Форматирование текста
- •1.5.3.Списки
- •1.5.4.Таблицы
- •1.6.Изображения
- •1.7.Задание на лабораторную работу
- •1.8.Варианты заданий
- •1.9.Справочники и руководства
- •2.Лабораторная работа №2. Использование каскадных таблиц стилей css
- •2.1.Назначение css
- •2.2. Включение css в документ html
- •2.2.1.Внешние стили (external style sheets)
- •2.2.2.Таблицы стилей документа (document style sheets)
- •2.2.3.Стили, встроенные в элемент (inline styles)
- •2.3.Синтаксис css
- •2.3.1.Виды селекторов html селекторы
- •Селекторы класса
- •Id селекторы (идентификаторы)
- •2.3.2.Селекторы, зависящие от контекста Селекторы потомков
- •Селекторы детей
- •3.1.2.Элемент textarea
- •3.1.3.Элемент input
- •3.1.4.Элемент select .. Option
- •3.2.Пример реализации формы
- •3.3.Обработка данных форм на JavaScript
- •3.4.Лабораторное задание
- •3.5.Справочники и руководства
- •4.Лабораторная работа №4. Java Script. Работа с html-страницей при помощи объектной модели документа dom
- •4.1.Введение
- •4.2.Структура программы JavaScript
- •4.2.1.Включение сценария в html-файл
- •4.2.2.Выполнение сценариев и отображение страницы
- •4.2.3.Операторы и комментарии
- •4.3.Dom: работа с html-страницей
- •4.3.1.Глобальная структура объектов браузера
- •4.3.2.Дерево dom-объектов
- •4.3.3.Доступ к элементам dom и навигация
- •4.3.4.Свойства элементов dom
- •4.3.5.Атрибуты элементов dom
- •4.3.6.Добавление и удаление элементов dom
- •4.3.7.Работа с таблицами в dom
- •4.4.Работа со стилями при помощи JavaScript
- •4.4.1.Работа с классом элемента
- •4.4.2.Работа с css-свойствами
- •4.5.Задание на лабораторную работу
- •5.Лабораторная работа 5. Сценарии php. Обработка форм на стороне сервера
- •5.2.Лабораторное задание
4.3.7.Работа с таблицами в dom
Таблица и ее элементы (строки, столбцы) также являются объектами дерева DOM и поддерживают все методы работы с ним. Кроме того, у таблиц (объект HTMLTableElement) есть дополнительные средства навигации и доступа к элементам.
table.rows[] – список строк таблицы;
tr.cells[] – список ячеек строки;
tr.rowIndex – номер строки;
td.cellIndex – номер ячейки в строке.
Можно получить количество строки таблицы и количество ячеек в строке:
table.rows.length – количество строк таблицы;
tr.cells.length – количество ячеек в строке.
Для добавления и удаления элементов таблицы можно воспользоваться функциями:
table.insertRow(индекс_строки) – вставка строки;
tr.insertCell(индекс_строки) – вставка ячейки в строку.
В следующем примере реализован сценарий добавления и удаления данных в таблицу:
<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
4.4.Работа со стилями при помощи JavaScript
4.4.1.Работа с классом элемента
Свойство className соответствует HTML-атрибуту class. При помощи этого свойства можно присвоить элементу любой класс:
document.body.className = ”myclass”;
Поскольку элемент может одновременно иметь несколько классов, перечисленных через пробел то можно добавить к уже существующим классам новый:
document.body.className += ” myclass”;
Поиск и удаление класса в списке классов, разделенных пробелами, требует более сложного программного кода, связанного с разбором текстовой строки – свойства className.
Для того чтобы удалить все классы элемента, достаточно присвоить свойству className пустое значение:
document.body.className = ” ”;