Добавляем...


Работа с таблицами в рамках DOM
Дескриптор <table>, определенный в HTML 4, имеет множество атрибутов, которым соответствуют свойства DOM с аналогичными именами, как и для всех других элементов HTML. В случае <table> среди этих свойств мы видим align, bgColor, border, cellPadding, cellspacing и width. В рамках дескриптора <table> можно ожидать наличия дескриптора <caption> и нескольких строк таблицы, определенных с помощью <tr> с заголовками (<th>) и ячейками данных (<td>). В HTML 4 таблицы поддерживают следующую расширенную структуру.
  • Открывающий дескриптор <table>.
  • Необязательный заголовок, заданный с помощью <caption>...</caption>.
  • Одна или несколько строк, которые могут состоять из заголовка, заданного с помощью <thead>, завершающего раздела, заданного с помощью <tf oot>, и основного раздела, заданного с помощью <tbody>. Хотя все эти элементы необязательны, таблица должна содержать как минимум набор строк, заданных с помощью <tr>. Сами строки должны содержать как минимум один заголовок или одну ячейку данных, определенные, соответственно, с помощью <th> или <td>.
  • Одна или несколько групп столбцов, указанных с помощью <columngroup> и содержащих отдельные столбцы, определенные с помощью <col>.
  • Закрывающий дескриптор </table>.
Кроме того, HTML 4 определяет для таблицы атрибут frame, устанавливающий тип рамки, которую должна иметь таблица, атрибут rules, размещающий линии-разделители между строками и столбцами, а также атрибут summary, определяющий вид таблицы для браузеров без визуализации. Следующий простой пример позволит вам поэкспериментировать с общими свойствами таблиц (X)HTML.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Инспектр таблиц X(HTML)</title>
<meta http-equiv="content-type" content="text/html; " />
</head>
<body>
<table border="1" frame="box" id="testTable">
<caption>Тестовая таблица</caption>
<thead>
<tr>
<th>Модель</th>
<th>Артикул</th>
<th>Цена</th>
</tr>
</thead>
<!-- tfoot должен размещаться перед tbody -->
<tfoot>
<tr>
<th colspan="3">Это пример таблицы HTML 4 спасибо за внимание</th>
</tr>
</tfoot>
<tbody>
<tr>
<th colspan="3" align="center">Robots</th>

</tr>
<tr>
<td>Робот-тренер</td>
<td>TR-456</td>
<td>$56,000</td>
</tr>
<tr>
<td>Робот-охранник</td>
<td>SEC-559</td>
<td>$5,000</td>
</tr>
<tr>
<td>Робот-друг</td>
<td>AG-343</td>
<td>$124,000</td>
</tr>
</tbody>
<tbody>
<tr>
<th colspan="3" align="center">Ускоритель</th>
</tr>
<tr>
<td>Базовый</td>
<td>JP-3455E6</td>
<td>$6,000</td>
</tr>
<tr>
<td>"Люкс"</td>
<td>JP-9999d</td>
<td>$15,000</td>
</tr>
</tbody>
</table>
<br clear="all" /><hr /><br clear="all" />
<script type="text/javascript">
var theTable = document.getElementById('testTable');
</script>
<form action="#" method="get">
<strong>Выравнивание:</strong>
<select onchange="theTable.align = this.options[this.selectedIndex].text;">
<option>left</option>
<option>center</option>
<option>right</option>
</select>
<strong>Фон:</strong>
<select onchange="theTable.bgColor =
this.options[this.selectedIndex].text;">
<option>white</option>
<option>red</option>
<option>blue</option>
<option>yellow</option>
<option>orange</option>
<option>green</option>
<option>black</option>
</select>
<strong>Рамка:</strong>
<select onchange="theTable.frame = this.options[this.selectedIndex].text;">
<option>above</option>
<option>below</option>
<option>border</option>
<option>box</option>
<option>hsides</option>
<option>vsides</option>
<option>lhs</option>
<option>rhs</option>
<option>void</option>
</select>
<strong>Линии-разделители:</strong>
<select onchange="theTable.rules = this.options[this.selectedIndex].text;">
<option>all</option>
<option>cols</option>
<option>groups</option>
<option>none</option>
<option>rows</option>
</select>
<br /><br />
<strong>Граница:</strong>
<input type="text" size="2" maxlength="2" value="1" onchange="theTable.border = this.value;" />
<strong>Заполнитель:</strong>
<input type="text" size="2" maxlength="2" value="1" onchange="theTable.cellPadding = this.value;" />
<strong>Расстояние-между ячейками:</strong>
<input type="text" size="2" maxlength="2" value="1" onchange="theTable.cellSpacing = this.value;" />
</form>
</body>
</html>

Просмотреть

Объект HTMLTableElement также содержит ссылки на типичные включаемые элементы. Например, tableElement. caption ссылается на дескриптор <caption> в таблице, заданной ссылкой tableElement, a tableElement. tHead и tableElement. tFoot, — соответственно, на дескрипторы <thead>H <tfoot>. Коллекция rows [ ] обеспечивает доступ к дескрипторам <tr> в пределах таблицы, начиная с индекса 0, как и в любой другой коллекции, а коллекция tBodies [ ] обеспечивает доступ к дескрипторам <tbody>. В рамках этих объектов можно рассмотреть их индивидуальные коллекции rows[ ], которые содержат объекты, указывающие на соответствующие дескрипторы <tr> в рамках субэлемента таблицы. Используя предыдущий пример, можно записать небольшой сценарий, отображающий итоги таблицы.

<script language="JavaScript">
var theTable = document.getElementById('testTable');
document.writeln("<pre>");
document.writeln("Всего строк в таблице = "+theTable.rows.length);
document.writeln ("Число дескрипторов tbody = "+theTable.tBodies.length) ;
for (i = 0; i < theTable.tBodies.length; i++)
document.writeln("\t tbody["+i+"] число строк = "+theTable.tBodies[i].rows.length);
document.writeln("Строк в дескрипторе tfoot = "+theTable.tFoot.rows.length);
document.writeln("Строк в дескрипторе thead ¦ "+theTable.tHead.rows.length);
document.writeln("</pre>");
</script>

Имеется также множество методов, предлагаемых для основных элементов таблицы. Среди них createTHead(), createTFoot(), createCaption(), а также insertRow (индекс), где индекс — это числовое значение, указывающее точку вставки строки, начиная со значения 0. Аналогично методам создания, объект HTMLTableElement также поддерживает deleteCaption (), deleteTHead(), deleteTFoot() HdeleteRowIndex (индекс) .Так, для предыдущего примера таблицы HTML 4 можно снова записать сценарии, демонстрирующие удаление и добавление элементов таблицы. Удалить элементы из таблицы легко, а вот добавить — труднее.

<script type="text/javascript">
var theTable = document.getElementById('testTable');
</script>

<form name="testForm" id="testForm">
<input type="text" name="rowtodelete" id="rowtodelete" size="2" maxlength="2" value="1" />
<input type="button" value="Удалить строку" onclick="if (theTable.rows.length > 0)
theTable.deleteRow(document.testForm.rowtodelete.value);" /> <br />
<input type="button" value="Удaлить <thead>"
onclick="theTable.deleteTHead();" /> <input type="button" value="Удaлить <tfoot>"
onclick="theTable.deleteTFoot(); " /> <input type="button" value="Удалить <caption>"
onclick="theTable.deleteCaption();"
/>
<input type="text" name="rowtcinsert" id="rowtoinsert" size="2"
maxlength="2" value="1" /> <input type="button" value="вставить строку"
onclick="theTable.insertRow(document.testForm.rowtoinsert.value);" />
</form>

Строка таблицы, определенная с помощью <tr> в документе HTML и объекта HTMLTableRowElement в DOM. имеет обычные связанные с атрибутом HTML свойства — как базовые (id, class, style, title, lang, dir), так и специальные типа align, bgColor, ch, chOff (аналог атрибута charOff) и vAlign. Но имеется и несколько специальных свойств, заслуживающих отдельного рассмотрения. Например, rowlndex указывает индекс строки в таблице. Свойство sectionRowIndex указывает индекс строки в пределах элемента <tbody>, <thead> или <tfoot>, к которому эта строка принадлежит. Наконец, коллекция cells[ ] для HTMLTableRowElement — это коллекция ячеек в строке, определенных элементами <td> или <th>. В пределах строки таблицы можно также использовать несколько полезных методов, включая insertCell(индекс), который создает объект HTMLElement для дескриптора <td> в столбце, указанном значением индекс, а также deleteCell (индекс), который, очевидно, должен удалить ячейку с указанным значением индекс. Ячейка таблицы, определенная в HTML с помощью дескриптора <td>, имеет лишь несколько специальных свойств, кроме обычных свойств, связанных с атрибутами: abbr, align, axis, bgColor, ch, chOff, height, noWrap, rowSpan, vAlign и width. Специальным свойством, заслуживающим упоминания, является cell Index, которое содержит индекс ячейки в текущей строке. Соответствующее значение может оказаться полезным для передачи методам insertCell() и deleteCell(). Следующий простой пример показывает, как работать с ячейками таблицы:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Работа с ячейками таблицы</title>
<meta http-equiv="content-type" content="text/html; " />
</head>
<body>
<table id="table1" border="1">
<tr id="row1">
<td id="cell1">Ячейка 1</td>
<td id="cell2">Ячейка 2</td>
</tr>
<tr id="row2">
<td id="cell3">Ячейка 3</td>
<td id="cell4">Ячейка 4</td>
</tr>
</table>
<script type="text/javascript">
<!--
var theTable = document.getElementById("table1");
function doRowInsert(row)
{
var rowNumber = parseFloat(row);
if ((rowNumber >= 0) && (rowNumber <= theTable.rows.length))
theTable.insertRow(rowNumber);
}
function doCellInsert(row,column)
{
var rowNumber = parseFloat(row);
var colNumber = parseFloat(column);
var numberRowsInTable = theTable.rows.length;
if ((rowNumber >= 0 ) && (colNumber >= 0))
{
if (rowNumber >= numberRowsInTable)
{
alert("Нельзя добавлять за пределами определенных строк");
return;
}
if (colNumber > theTable.rows[rowNumber].cells.length)
{
alert("Нельзя добавлять за пределами столбцов");
return;
}
theTable.rows[rowNumber].insertCell(colNumber);
}
}
function doCellModification(row,column,newValue)
{
var rowNumber = parseFloat(row);
var colNumber = parseFloat(column);
var numberRowsInTable = theTable.rows.length;
if ((rowNumber >= 0 ) && (colNumber >= 0))
{
if (rowNumber >= numberRowsInTable)
{
alert("Нельзя");
return;
}
if (colNumber >= theTable.rows[rowNumber].cells.length)
{
alert("Нельзя модифицировать ячейки за пределами таблицы");
return;
}
theTable.rows[rowNumber].cells[colNumber].innerHTML = newValue;
}
}
function doCellDelete(row,column)
{
var rowNumber = parseFloat(row);
var colNumber = parseFloat(column);
var numberRowsInTable = theTable.rows.length;
if ((rowNumber >= 0 ) && (colNumber >= 0))
{
if (rowNumber >= numberRowsInTable)
{
alert("Нельзя удалять за пределами строк");
return;
}
if (colNumber >= theTable.rows[rowNumber].cells.length)
{
alert("Нельзя удалять за пределами столбцов");
return;
}
theTable.rows[rowNumber].deleteCell(colNumber);
}
}
//-->
</script>
<form name="testForm" id="testForm" action="#" method="get">
Строка #: <input type="text" name="rowtoinsert" id="rowtoinsert" size="2"
maxlength="2" value="1" />
<input type="button" value="Вставить строку"
onclick="doRowInsert(document.testForm.rowtoinsert.value);" /><br />
Строка #: <input type="text" name="insertionRow" id="insertionRow" size="2"
maxlength="2" value="0" />
Столбец #: <input type="text" name="insertionColumn" id="insertionColumn" size="2"
maxlength="2" value="0" />
<input type="button" value="Вставить ячейку" onclick=" doCellInsert(document.testForm.insertionRow.value, document.testForm.insertionColumn.value) ;" /><br />
Строка #: <input type="text" name="modifyRow" id="modifyRow" size="2" maxlength="2"
value="0" />
Столбец #: <input type="text" name="modifyColumn" id="modifyColumn" size="2"
maxlength="2" value="0" />
Новое содержимое: <input type="text" name="newContents" id="newContents" size="20"
maxlength="20" value="" />
<input type="button" value="Установить"
onclick="doCellModification( document.testForm.modifyRow.value,document.testForm.modifyColumn.value, document.testForm.newContents.value) ;" /><br />
Строка #: <input type="text" name="deletionRow" id="deletionRow" size="2"
maxlength="2" value="0" />
Столбец #: <input type="text" name="deletionColumn" id="deletionColumn" size="2" maxlength="2" value="0" />
<input type="button" value="Удалить ячейку"
onclick="doCellDelete(document.testForm.deletionRow.value, document.testForm.deletionColumn.value);" /><br />
</form>
</body>
</html>

Просмотреть


добавить комментарий
(без перезагрузки и регистрации)


10 случайных разделов

Что ищем на сайте ?


Примеры кода на сайте







@ 2008-2011 Amber
При использовании материалов ссылка на сайт обязательна
Яндекс.Метрика