Данный объект представляет элемент <table> в HDOM.
Помимо специальных методов и свойств объект имеет также стандартные методы и свойства.
| Методы и свойства | Описание |
|---|---|
| border | Возвращает или устанавливает значение атрибута border данного элемента. |
| cellPadding | Возвращает или устанавливает значение атрибута cellpadding данного элемента. |
| cells | Возвращает массив позволяющий обратится к любой ячейки в строке. |
| cellSpacing | Возвращает или устанавливает значение атрибута cellspacing данного элемента. |
| frame | Возвращает или устанавливает значение атрибута frame данного элемента. |
| rows | Возвращает массив который позволяет обратится ко всем строкам таблицы. |
| rules | Возвращает или устанавливает значение атрибута rules данного элемента. |
| summary | Возвращает или устанавливает значение атрибута summary данного элемента. |
| width | Возвращает или устанавливает значение атрибута width данного элемента. |
| createCaption() | Создает табличный заголовок. Данный метод создаст пустой заголовок, чтобы наполнить его текстом обратитесь к нему через объектную структуру. |
| deleteCaption() | Удаляет табличный заголовок. |
| deleteRow() | Позволяет удалить строку из таблицы. |
| insertRow() | Позволяет добавить строку в таблицу. |
Пример
function newCell()
{
/* Создадим новую строку и поместим ее на вторую позицию (после Великобритании) */
var x=document.getElementsByTagName('table')[0].insertRow(2);
/* Теперь создадим в новой строке две пустые ячейки */
x.insertCell(0);
x.insertCell(1);
/* И затем заполним эти ячейки данными */
document.getElementsByTagName('table')[0].rows[2].cells[0].innerHTML='Германия';
document.getElementsByTagName('table')[0].rows[2].cells[1].innerHTML='82';
}
function delCell()
{
document.getElementsByTagName('table')[0].deleteRow(4);
}
....
<table width='43%' border='1'>
<tr>
<th> Страна </th>
<th> Население (млн.) </th>
</tr>
<tr>
<td>Великобритания</td>
<td>61</td>
</tr>
<tr>
<td>Китай</td>
<td>1338</td>
</tr>
<tr>
<td>Россия</td>
<td>141</td>
</tr>
<tr>
<td>США</td>
<td>309</td>
</tr>
</table>
<input type='button' value='Вставить новую строку' onclick='newCell()' />
<input type='button' value='Удалить последнюю строку' onclick='delCell()' />
....
document.write(document.getElementsByTagName('table')[0].border + '<br />');
document.write(document.getElementsByTagName('table')[0].width + '<br />');
document.write(document.getElementsByTagName('table')[0].rows[3].cells[0].innerHTML+'<br />');
document.write(document.getElementsByTagName('table')[0].rows[4].cells[0].innerHTML+'<br />');
document.write(document.getElementsByTagName('table')[0].rows[3].cells[1].innerHTML+'<br />');
document.write(document.getElementsByTagName('table')[0].rows[2].cells[1].innerHTML+'<br />');