Главная » HTML » Таблица как объект HTML, W3C DOM

Таблица как объект HTML, W3C DOM

Объект — некоторая абстракция, которой можно дать уникальное и осмысленное имя. Оно (имя) отделяет конкретный объект от других подобных абстракций. Каждый объект обладает уникальным набором свойств. Эти свойства называются атрибутами. Каждый экземпляр объекта описывается конкретным набором значений атрибутов.

Таблица является одним из объектов HTML, который обладает своими свойствами, методами, атрибутами. Для доступа к которым используют следующую конструкцию:
[window.]document.getElementById(“идентификатор”).свойство | метод([параметры])

Иерархическая структура таблиц

Существует четыре дескриптора, с помощью которых можно определить различные области таблицы: описание, заголовок, тело и нижний колонтитул (соответственно: CAPTION, THEAD, TBODY и TFOOT).

<Table>
    <Caption></Caption>
<THead>
    <TR>
    <TH></TH>
    <TH></TH>
    </TR>
</THead>
<TBody>
    <TR>
    <TD></TD>
    <TD></TD>
    </TR>
</TBody>
<TFoot>
    <TR>
    <TD></TD>
    <TD></TD>
    </TR>
</TFoot>
</Table>

Обратите внимание, в каком порядке идут эти элементы: сначала THEAD, затем TBODY и в конце TFOOT. Именно в такой последовательности браузер будет выводить содержимое этих элементов в независимости от того, как они будут расположены в коде.

Каждый этот элемент можно использовать неоднократно в пределах одной таблицы. В этом случае в коде лучше придерживаться правилам иерархической структуры, иначе браузер Вас может просто не понять и выдать Вам неожиданный результат.

Использование данных элементов на сегодняшний день, наверное, является больше «хорошим тоном программирования» и встречается в сложных структурах таблиц. Элементы THEAD, TBODY, TFOOT опускаются за ненадобностью, так как это не мешает нормальной работе браузера.

Свойства (атрибуты)

Border – значение: целочисленное; доступ: чтение/запись
Задаёт толщину границ таблицы.

<table border=”2”>...</table>

Rules – значение: строковая константа; доступ: чтение/запись
Используется для управления отображения границ исключительно ячейками.
Различают пять значений свойства rules:

Значение Описание
All Граница вокруг каждой ячейки
Cols Вертикальные границы между столбцами
Groups Вертикальные границы между группами столбцов; горизонтальные границы между группами строк
None Границы между ячейками не отображаются
Rows Горизонтальные границы между группами строк

<table rules=”cols”>...</table>

Frame – значение: строковая константа; доступ: чтение/запись
Используется для управления отображения сторон границы таблицы.
Различают девять значений свойства frame:

Значение Описание
Above Только верхняя граница
Below Только нижняя граница
Border Все четыре стороны (аналогично box)
Box Все четыре стороны (аналогично border)
Hsides Только горизонтальные стороны (верхняя и нижняя)
Lhs Только левая граница
Rhs Только правая граница
Void Не отображать границы
Vsides Только вертикальные границы (правая и левая)

<table frame=”hsides”>…</table>

BorderColor – значение: строковое представление цвета; доступ: чтение/запись
Задаёт цвет отображения границы.

<table bordercolor=”#990000”>…</table>

Cellspacing – значение: целочисленное; доступ: чтение/запись
Задаёт расстояние между ячейками.

<table cellspacing=”4”>…</table>

Cellpadding - значение: целочисленное; доступ: чтение/запись
Определяет поле между краем ячейки таблицы и её содержимым.

<table cellpadding=”4”>…</table>

Align –значение: строковая константа; доступ: чтение/запись
Предназначено для управления горизонтальным выравниванием таблицы относительно внешнего контейнера.

Различают три значения свойства align:

Значение Описание
Center Относительно центра
Left Относительно левого края
Right Относительно правого края

Bgcolor - значение: строковое представление цвета; доступ: чтение/запись
Задаёт цвет фона таблицы.

<table bgcolor="red">
    <tbody>
    <tr>
        <td>красный</td>
        <td>красный</td>
    </tr>
    <tr bgcolor="#FFFFFF">
        <td bgcolor="green">зелёный</td>
        <td>белый</td>
    </tr>
</tbody>
</table>

Height, Width – значение: целочисленное или длина строки; доступ: чтение/запись
Эти два свойства предназначены для хранения значений высоты и ширины, присвоенных элементу TABLE. Значение может приниматься как в пиксельном, так и в процентном соотношении.

<table height=”100” width=”100%”>
    <tbody>
    <tr height=”30”>
        <td width=”300”>…</td>
        <td>…</td>
    </tr>
    <tr height=”70”>
        <td>…</td>
        <td>…</td>
    </tr>
    </tbody>
</table>

Cells – значение: массив; доступ: только чтение
конструкция: [window.]document.getElementById(“идентификатор_таблицы”).cells[]
Возвращает массив, который содержит описание всех атрибутов, всех элементов TD таблицы.

<html>
<head>
<script language="JavaScript">
function f()
    {
    var td_cells=document.getElementById("tbl").cells;
    for (var i=0; i<td_cells.length; i++)
    alert(td_cells<i>.attributes("id").value);
    }
</script>
</head>
<body>
<table border="1" width="200" height="200" id="tbl">
<tbody>
    <tr>
        <td id="id_1">1</td>
        <td id="id_2">2</td>
    </tr>
    <tr>
        <td id="id_3">3</td>
        <td id="id_4">4</td>
    </tr>
</tbody>
</table>
<input type="button" value="cells" onclick="f()">
</body>
</html>

Динамическая работа с таблицами

Под динамической работой с таблицами будем понимать следующее:

  • создание таблицы;
  • добавление в таблицу столбцов и строк;
  • удаление строк/ячеек таблицы;
  • перемещение строк;
  • управление атрибутами таблицы, столбцов, строк;
  • заполнение ячеек таблицы текстом и кодом;

Прежде чем начать описывать динамическую работу с таблицами, хочу обратить внимание на свойство innerHTML.

innerHTML – возвращаемое значение: строка; доступ: чтение/запись
конструкция:
[window.]document.getElementById(“идентификатор ”).innerHTML
Один из способов доступа к содержимому элемента в браузере. Т.е. с помощью свойства innerHTML можно добавить новые вложенные элементы на страницу. Или прочитать уже существующие на странице элементы со всеми входящими в этот элемент атрибутами.

Замечание

Данное свойство не во всех случаях пригодно для работы с таблицами.

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

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

createElement() – возвращаемое значение: отсутствует
конструкция: var <имя_переменной>=document.createElement(“дескриптор”)
Генерирует элемент с любым дескриптором (тэгом). После использование данного метода в памяти браузера будет создана ссылка на пустой элемент, содержащий название дескриптора.

Создадим функцию createTable():

<script language=”JavaScript”>
function createTable()
    {
    var newElem=document.createElement(“table”);
    }
</script>

После выполнения данной функции, как уже было сказано ранее, в памяти браузера создается ссылка на элемент с именем дескриптора TABLE.

Управление атрибутами

Теперь нам необходимо наполнить этот элемент атрибутами. Например, присвоим таблице идентификатор ID с именем «tbl», зададим длину равной 400 пикселей и укажем толщину границ таблицы равной единице.

Есть два способа присвоения атрибутов элементу:

1. Использование метода setAttribute()

setAttribute(«имя_атрибута», «значение») – возвращаемое значение: отсутствует
Присваивает новое значение существующему атрибуту текущего объекта или вставляет совершенно новую пару имя-значение в набор атрибутов объекта.

Допишем функцию createTable():

<script language=”JavaScript”>
function createTable()
    {
    var newElem=document.createElement(“table”);
    newElem.setAttribute(“id”,”tbl”);
    newElem.setAttribute(“width”,”400”);
    newElem.setAttribute(“border”,”1”);
    }
</script>

2. Атрибуты есть неотъемлемая часть каждого дескриптора (тэга) и вне зависимости от того указали Вы его или нет в своём коде, для браузера они есть и их значения определяются по умолчанию, которые указаны разработчиком для того или иного браузера. (Вы наверняка обращали внимание на то, что один и тот же html-код в различных браузерах может давать отличающиеся результаты.) А так как дескриптор это не что иное, как объект-HTML, а объект, в «грубом» его понимании, можно рассматривать как массив, то и обращаться к атрибутам дескриптора (тэга) можно как это делается в массивах.

На практике выше сказанное выглядит следующем образом:

<script language=”JavaScript”>
function createTable()
    {
    var newElem=document.createElement(“table”);
    newElem.id=”tbl”;
    newElem.width=400;
    newElem.border=1;
    }
</script>

или

<script language=”JavaScript”>
function createTable()
    {
    var newElem=document.createElement(“table”);
    newElem[“id”]=”tbl”;
    newElem[“width”]=400;
    newElem[“border”]=1;
    }
</script>

Теперь в памяти браузера создается ссылка на элемент с набором атрибутов, но он всё ещё не является частью документа и, следовательно, к нему нельзя обратиться, используя, например, метод document.getElementById(). Для того чтобы прописать его непосредственно в документ нужно воспользоваться методом appendChild().

appendChild(объект_элемента) – возвращаемое значение: ссылка на объект узла.
конструкция: [window.]document.getElementById(“идентификатор”).appendChild(“объект_элемента”)
Метод appendChild() вставляет элемент или текстовый узел (определённый в предыдущем коде) в качестве нового, последнего объекта текущего элемента.

Используя метод appendChild() допишем функцию createTable():

<script language=”JavaScript”>
function createTable()
    {
    var newElem=document.createElement(“table”);
    newElem.id=”tbl”;
    newElem.width=400;
    newElem.border=1;
    document.body.appendChild(newElem);
    }
</script>

Результат выполнения функции createTable(), будет равносилен записи: <table id=”tbl” width=”400” border=”1”></table>.

Также надо отметить, что есть более простой способ для создания таблицы, используя метод innerHTML.

<script language=”JavaScript”>
function createTable_innerHTML()
    {
    document.body.innerHTML="<table id="tbl" width="400" border="1"></table>";
    }
</script>

Каким способом лучше пользоваться определяется поставленной задачей, оба способа имеют свои плюсы и минусы.

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

Теперь, когда в документ страницы прописан дескриптор TABLE и обозначены некоторые из атрибутов, необходимо создать строку, дескриптор TR, для этого используется метод insertRow().

insertRow(индекс) – возвращаемое значение: нет; создаёт ссылку на созданную строку.
Этот метод предназначен для добавления элементов TR в элемент TABLE. Индекс указывает на место расположения новой строки в таблице. Если указать индекс равный «-1», то новая строка прописывается в конце таблицы (нумерация строк идёт с верху таблицы, отсчёт с нуля).
конструкция: var <имя_переменной>=[window.]document.getElementById(“идентификатор”).tBodies[индекс].insertRow[индекс]
Обратите внимание в конструкции на свойство tBodies[индекс], при обращении к заголовку или нижнему колонтитулу таблицы вместо tBodies используются свойства tHead[индекс] и tFoot[индекс] соответственно. А также не забудьте, что даже если Вы не прописываете дескриптор TBODY, обращаться к элементам в теле таблице всё равно нужно с использованием свойства tBodies, индекс которого будет равен нулю.

Описание атрибутов дескриптора TR происходит так же, как описывалось ранее для дескриптора TABLE.

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

Теперь необходимо в созданной строке создать столбцы, прописать дескрипторы TD, для этого используется метод insertCell(). Метод insertCell() действует аналогично методу insertRow().

Заполнение ячеек таблицы текстом и кодом

Чтоб заполнить ячейку таблицы кодом или текстом можно воспользоваться следующими методами, свойствами: innerHTML(), createElement(), о которых говорилось выше; innerText() и createTextNode().

Свойство innerText() отличается от свойства innerHTML() лишь тем, что включает только текстовое содержимое, а это значит, что когда свойству innerText() присваивается строка, содержащая дескрипторы HTML, то они выводятся на экран как есть, вместе с угловыми скобками.

В свою очередь метод createTextNode() по аналогии схож с методом createElement().

Продемонстрируем это всё на примере, дописав функцию createTable().

<script language="JavaScript">
function createTable()
    {
    
    var newElem=document.createElement("table");//создаём новый элемент страницы (TABLE)
    newElem.border=1;//указывает толщину рамки таблицы
    
    var newRow=newElem.insertRow(0);//добавляем строку в созданной таблице
    var newCell = newRow.insertCell(0);//в созданной строке добавляем столбец
    newCell.width="200";//указываем длину столбца равной 200 пикселей
    newCell.align="center";//указываем позиционирование по центру
    newCell.innerHTML="<b>строка 1 столбец 1</b>";//заполняем ячейку жирным текстом
    
    var newCell = newRow.insertCell(-1);//добавляем ещё один столбец
    newCell.width="400";//указываем длину столбца равной 400 пикселей
    newCell.align="center";//указываем позиционирование по центру
    newCell.innerText="<b>строка 1 столбец 2</b>";//заполняем ячейку текстом
    
    var newRow=newElem.insertRow(1);//добавляем ещё одну строку в таблицу
    var newCell = newRow.insertCell(0); //в созданной строке добавляем столбец
    newCell.width="200";//указываем длину столбца равной 200 пикселей
    newCell.align="center";//указываем позиционирование по центру
    
    addText=document.createTextNode("<b>строка 2 столбец 1</b>");//генерируем текстовый узел
    newCell.appendChild(addText);//созданный текстовый узел добавляем в ячейку
    
    var newCell = newRow.insertCell(-1); //добавляем ещё один столбец
    newCell.width="400";//указываем длину столбца равной 400 пикселей
    newCell.align="center";//указываем позиционирование по центру
    addElem=document.createElement("b");//создаём новый элемент страницы (B)
    addText=document.createTextNode("строка 2 столбец 2");//генерируем текстовый узел
    addElem.appendChild(addText);//созданный текстовый узел добавляем к новому элементу (addElem)
    newCell.appendChild(addElem);//полученный узел (addElem) добавляем в ячейку
    
    document.body.appendChild(newElem);//прописываем созданную таблицу на страницу
    }
</script>

После выполнения функции createTable() на экране должна отобразиться таблица, следующего вида:

строка 1 столбец 1 <b>строка 1 столбец 2</b>
<b>строка 2 столбец 1</b> строка 2 столбец 2

Перемещение строк

Чтобы переместить строку таблицы нужно воспользоваться методом moveRow()
moveRow(индекс_источника, индекс_приёмника) – возвращаемое значение: объект элемента строки.
конструкция: [window.]document.getElementById(“индификатор_таблицы”).tBodies[индекс].moveRow()
Индекс источника и приёмника есть целочисленное значение. Индекс источника указывает, какую строку необходимо переместить, а индекс приёмника определяет положение, куда необходимо переместить строку.

Удаление строк/ячеек таблицы

Для удаления строк таблицы используется метод deleteRow(). Этот метод по своей конструкции аналогичен методу insertRow(), разница лишь в том, что функция его не создание, а удаление строки в таблице. Для удаление в строке столбца (ячейки) используется метод deleteCell().

Приведем пример на удаление и перемещение строк:

<html>
<head>
<script language="JavaScript">
function delete_tr(obj)
    {
    var num_tr=obj.parentNode.parentNode. sectionRowIndex
    document.getElementById("tbl").tBodies[0].deleteRow(num_tr)
    }
function up_tr(obj)
    {
    var num_tr=obj.parentNode.parentNode. sectionRowIndex
    if (num_tr!=0) document.getElementById("tbl").tBodies[0].moveRow(num_tr, num_tr-1)
    }
function down_tr(obj)
    {
    var num_all_tr=obj.parentNode.parentNode.parentNode.childNodes.length
    var num_tr=obj.parentNode.parentNode sectionRowIndex
    if (num_tr!=num_all_tr-1) document.getElementById("tbl").tBodies[0].moveRow(num_tr, num_tr+1)
    }
</script>
</head>
<body>
<table id="tbl" width="400" border="1">
    <tr>
        <td width="10"><b>0</b></td>
        <td><a href="#" onclick="delete_tr(this)">удалить строку</a></td>
        <td><a href="#" onclick="up_tr(this)">поднять строку</a>&nbsp;&nbsp;<a href="#" onclick="down_tr(this)">опустить строку</a></td>
    </tr>
    <tr>
        <td width="10"><b>1</b></td>
        <td><a href="#" onclick="delete_tr(this)">удалить строку</a></td>
        <td><a href="#" onclick="up_tr(this)">поднять строку</a>&nbsp;&nbsp;<a href="#" onclick="down_tr(this)">опустить строку</a></td>
    </tr>
    <tr>
        <td width="10"><b>2</b></td>
        <td><a href="#" onclick="delete_tr(this)">удалить строку</a></td>
        <td><a href="#" onclick="up_tr(this)">поднять строку</a>&nbsp;&nbsp;<a href="#" onclick="down_tr(this)">опустить строку</a></td>
    </tr>
</table>
</body>
</html>

selectionRowIndex, rowIndex – возвращаемое значение: целочисленное
В приведённом примере используется свойство selectionRowIndex, предназначенное для определения места расположения строки в таблице. Также есть ещё схожее свойство rowIndex, отличающаяся тем, что selectionRowIndex определяет положение строки относительно того или иного раздела (tBodies, tFoot, tHead), а rowIndex определяет положение строки относительно всей таблицы, считает все строки всех разделов.

Заключение

Эта статья не претендует на звание «полное описание работы с таблицами в HTML», её предназначение несёт скорее кратко-описательный характер. Вообще, конструкция таблиц в HTML является достаточно сложной и вместе с тем, популярной среди web-разработчиков, поэтому, наверное, будет не лишнем потратить какое-то время для более досконального изучения этого вопроса. Не лишнем будет изучение структуры HTML, а также такой интересной вещи как W3C DOM.



Рекомендуем почитать

 

Добавить комментарий


Ваше имя:


Комментарий:


Введите: Картинка