Интерфейсы для элементов модулей Basic Tables и Tables

Модуль Basic Tables содержит элементы table, caption, tr, th и td, а модуль Tables – дополнительно элементы col, colgroup, thead, tbody и tfoot.

Для элементов thead, tbody и tfoot определен интерфейс HTMLTableSectionElement со следующими основными свойствами:

· align – значение атрибута align;

· vAlign – значение атрибута valign;

· rows – содержит объект типа HTMLCollection (только для чтения) со списком строк для данного элемента thead, tbody или tfoot.

Интерфейс HTMLTableSectionElement содержит также два метода:

· insertRow(индекс) – вставляет строку в элемент перед строкой с заданным индексом и возвращает вставленную строку (объект типа HTMLElement). Если индекс равен -1 или равен количеству строк в разделе таблицы, строка добавляется в конец раздела;

· deleteRow(индекс) – удаляет строку с заданным индексом из элемента.

Для элемента caption определен интерфейс HTMLTableCaptionElement (без свойств и методов).

Для элемента table определен интерфейс HTMLTableElement со следующими основными свойствами:

· border – значение атрибута border;

· cellPadding – значение атрибута cellpadding;

· cellSpacing – значение атрибута cellspacing;

· rows – содержит объект типа HTMLCollection (только для чтения) со списком строк для данной таблицы;

· caption – содержит объект типа HTMLTableCaptionElement с заголовком таблицы;

· tHead – содержит объект типа HTMLTableSectionElement с элементом thead;

· tFoot – содержит объект типа HTMLTableSectionElement с элементом tfoot;

· tBodies – содержит объект типа HTMLCollection (только для чтения) со списком элементов tbody (объектами типа HTMLTableSectionElement), включая неявно объявленные элементы.

Интерфейс HTMLTableElement содержит также следующие методы:

· createCaption() – вставляет заголовок в таблицу и возвращает вставленный заголовок (объект типа HTMLElement);

· deleteCaption() – удаляет заголовок из таблицы;

· createTHead() – вставляет заголовочную часть в таблицу и возвращает элемент thead (объект типа HTMLElement);

· deleteThead() – удаляет заголовочную часть из таблицы;

· createTFoot() – вставляет «подвальную» часть в таблицу и возвращает элемент tfoot (объект типа HTMLElement);

· deleteTFoot() – удаляет «подвальную» часть из таблицы;

· deleteRow(индекс) – удаляет строку с заданным индексом из элемента.

Для элемента row определен интерфейс HTMLTableRowElement со следующими основными свойствами:

· align – значение атрибута align;

· vAlign – значение атрибута valign;

· rowIndex – индекс строки в таблице (только для чтения);

· sectionRowIndex – индекс строки в разделе таблице – заголовочной части, теле таблицы или «подвальной» части (только для чтения);

· cells – содержит объект типа HTMLCollection со списком ячеек данной строки.

Интерфейс HTMLTableRowElement содержит также два метода:

· insertCell(индекс) – вставляет ячейку в строку перед ячейкой с заданным индексом и возвращает вставленную ячейку (объект типа HTMLElement). Если индекс равен -1 или равен количеству ячеек в строке, ячейка добавляется в конец строки;

· deleteCell(индекс) – удаляет ячейку с заданным индексом из элемента

Для элементов td и th определен интерфейс HTMLTableCellElement со следующими основными свойствами:

· align – значение атрибута align;

· vAlign – значение атрибута valign;

· colSpan – значение атрибута colSpan;

· rowSpan – значение атрибута rowSpan;

· cellIndex – индекс ячейки в строке (только для чтения).

Для элементов col и colgroup определен интерфейс HTMLTableColElement со следующими основными свойствами:

· align – значение атрибута align;

· vAlign – значение атрибута valign;

· width – значение атрибута width;

· span – значение атрибута span.

Пример 4.5.18. Использование интерфейсов для таблиц:

Тело документа HTML имеет следующий вид:

<h1>Корзина закупок</h1>

В документе HTML задан также сценарий формирования таблицы содержимого корзины:

// Получение элемента body

var bodyElement = document.getElementsByTagName("body")[0];

// Заголовки таблицы

var headers = new Array("Наименование товара",

"Цена единицы (грн)", "Количество (шт)", "Цена (грн");

// Данные таблицы

var data = new Array(

new Array("Компьютер", "3000", "1"),

new Array("Принтер", "800", "3"),

new Array("Сканер", "520", "2"));

// Создание таблицы

var goodsTable = document.createElement("table");

// Задание границы таблицы

goodsTable.border = "4";

// Создание заголовка таблицы

var goodsTableCaption = goodsTable.createCaption();

// Занесение текста в заголовок таблицы

goodsTableCaption.appendChild(document.createTextNode(

"Содержимое корзины:"));

// Создание заголовочной части таблицы

var goodsTableHead = goodsTable.createTHead();

// Добавление строки к заголовочной части

goodsTableHeadRow = goodsTableHead.insertRow(-1);

// Заполнение строки заголовочной части таблицы в цикле

for(i = 0; i < headers.length; i++)

{

// Создание текущей ячейки

headerCelli = goodsTableHeadRow.insertCell(-1);

// Занесение текста в текущую ячейку

headerCelli.appendChild(

document.createTextNode(headers[i]));

}

// Начальное значение общей цены товара

totalPrice = 0;

// Создание тела таблицы

var goodsTableBody = document.createElement("tbody");

// Добавление тела к таблице

goodsTable.appendChild(goodsTableBody);

// Добавление строки к телу таблицы в цикле

for(i = 0; i < data.length; i++)

{

// Добавление строки к заголовочной части

goodsTableBodyRow = goodsTableBody.insertRow(-1);

// Заполнение текущей строки таблицы в цикле

for(j = 0; j < data[i].length; j++)

{

// Создание текущей ячейки

cellj = goodsTableBodyRow.insertCell(-1);

// Если ячейка не содержит

// наименования товара

if(j != 0)

// Выравнивание ячейки по центру

cellj.align = "center";

// Занесение текста в текущую ячейку

cellj.appendChild(

document.createTextNode(data[i][j]));

}

// Создание ячейки для цены

priceCell = goodsTableBodyRow.insertCell(-1);

// Определение цены товара

goodsPrice = parseInt(data[i][1]) *

parseInt(data[i][2]);

// Выравнивание ячейки по центру

priceCell.align = "center";

// Добавление полученной цены к общей цене

totalPrice += goodsPrice;

// Занесение цены в ячейку

priceCell.appendChild(

document.createTextNode(goodsPrice));

}

// Создание "подвала" таблицы

var goodsTableFoot = goodsTable.createTFoot();

// Добавление строки к "подвалу"

goodsTableFootRow = goodsTableFoot.insertRow(-1);

// Создание ячейки с надписью

labelCell = goodsTableFootRow.insertCell(-1);

// Установка размера ячейки с надписью в 3 столбца

labelCell.colSpan = "3";

// Установка выравнивания ячейки с надписью вправо

labelCell.align = "right";

// Занесение текста в ячейку с надписью

labelCell.appendChild(

document.createTextNode("Общая цена: "));

// Создание ячейки с общей ценой товара

totalPriceCell = goodsTableFootRow.insertCell(-1);

// Занесение текста в ячейку с общей ценой товара

totalPriceCell.appendChild(

document.createTextNode(totalPrice));

// Выравнивание ячейки по центру

totalPriceCell.align = "center";

// Добавление фрагмента документа к телу документа

bodyElement.appendChild(goodsTable);

В результате выполнения этого фрагмента будет выведена следующая Web-страница: