Таблицы в JavaScript

Как объект документа, таблица в JavaScript имеет две коллекции, посредством которых осуществляется доступ к ее содержимому.

первая – коллекция строк rows
вторая – коллекция ячеек cells

Коллекция rows содержит все строки таблицы, включая разделы, соответствующие тегам <THEAD> и <TFOOT>. Коллекция cells содержит все элементы таблицы, созданные с помощью тегов <TH> и <TD>. Доступ к элементам коллекций осуществляется или по индексу, или по значению атрибута ID в соответствующем теге. Так, для доступа к строке таблицы можно брать значение ID в теге <TR>, а для доступа к ячейке – значение ID в теге <TH> или <TD>. При использовании индекса(номера) следует иметь в виду, что нумерация начинается с нуля. При этом ячейки таблицы нумеруются слева направо и сверху вниз.

Рассмотрим пример простой таблицы, содержащей три столбца и четыре строки.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Таблица</title>
</head>

Приведем несколько примеров ссылок на элементы таблицы из сценария:

document.all.mytab.rows[0] /*ссылка на строку заголовков столбцов*/
document.all.mytab.rows[1] /*ссылка на первую строку данных*/
document.all.mytab.rows["r1"] /*другой способ ссылки на первую строку данных*/
document.all.mytab.cells[0]/*cсылка на ячейку, содержащую "Фамилия"*/
document.all.mytab.cells[3] /*ссылка на ячейку, содержащую "Иванов"*/
document.all.mytab.cells[4] /*ссылка на ячейку, содержащую "Nissan Almera"*/
document.all.mytab.cells[6] /*ссылка на ячейку, содержащую "Петров"*/

В веб-браузере это будет выглядеть ТАК.

Чтобы обратиться к строке или ячейке таблицы, следует учесть иерархию объектов: сначала обращаемся к коллекции all всех элементов документа, затем к таблице и только после этого – к элементу таблицы. Ссылочные выражения возвращают не содержимое элементов таблицы(строк или ячеек), а ссылки на элементы как на объекты.

Каждая строка таблицы(элемент коллекции rows), являясь объектом, имеет собственную коллекцию ячеек, которая называется cells, так же как и коллекция всех ячеек таблицы. Нумерация ячеек в этой коллекции происходит в пределах одной строки, начиная с 0(нуля). В нашем случае, в трехстолбовой таблице ячейки из коллекции cells для одной строки имеют индексы 0, 1 и 2. Вот несколько примеров.

document.all.mytab.rows[0].cells[0] /*ссылка на ячейку содержащую "Фамилия" */
document.all.mytab.rows[1].cells[0] /*ссылка на ячейку, содержащую "Иванов"*/
document.all.mytab.rows[1].cells[1] /*ссылка на ячейку, содержащую "Nissan Almera"*/
document.all.mytab.rows[2].cells[0] /*ссылка на ячейку, содержащую "Петров"*/
document.all.mytab.rows["r1"].cells[0] /*ссылка на ячейку, содержащую "Nissan Primera"*/

В веб-браузере это будет выглядеть ТАК.

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

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Таблица</title>
<script type="text/javascript">

document.all.mytab.rows[1].innerText //Иванов Nissan Almera с005со
document.all.mytab.cells[3].innerText //Иванов
document.all.mytab.rows[1].cells[2].innerText) //с005со

</script>
</head>

<body onLoad="alert(document.all.mytab.rows[1].innerText);
alert(document.all.mytab.cells[3].innerText);
alert(document.all.mytab.rows[1].cells[2].innerText)">
<table id="mytab" border="1">
<thead>Список автомобилей</thead>
<th>Фамилия</th><th>Марка автомобиля</th><th>Гос. номер</th>
<tr id="r1">
<td>Иванов</td><td>Nissan Almera</td><td>с005со</td>
</tr>
<tr id="r2">
<td>Петров</td><td>Nissan Primera</td><td>с123то</td>
</tr>
<tr id="r3">
<td>Сидоров</td><td>ВАЗ 2109</td><td>с045со</td>
</tr>
<tr id="r4">
<td>Федоров</td><td>ГАЗ 3102</td><td>с405со</td>
</tr>
</table>

</body>
</html>

В веб-браузере это будет выглядеть ТАК.

А теперь изменим содержимое ячеек.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Таблица</title>

</head>

<body >
<table id="mytab" border="1">
<thead>Список автомобилей</thead>
<th>Фамилия</th><th>Марка автомобиля</th><th>Гос. номер</th>
<tr id="r1">
<td>Иванов</td><td>Nissan Almera</td><td>с005со</td>
</tr>
<tr id="r2">
<td>Петров</td><td>Nissan Primera</td><td>с123то</td>
</tr>
<tr id="r3">
<td>Сидоров</td><td>ВАЗ 2109</td><td>с045со</td>
</tr>
<tr id="r4">
<td>Федоров</td><td>ГАЗ 3102</td><td>с405со</td>
</tr>
</table>
<script type="text/javascript">
document.all.mytab.rows[1].cells[0].innerText="Брагин" /*Изменяем текстовое содержание ячейки*/
document.all.mytab.rows[1].cells[2].innerText="а489пм" //а489пм
/*Заменяем текстовое содержание ячейки на изображение*/
document.all.mytab.rows[1].cells[1].innerHTML='<img src="images/foto5.jpg">'
</script>
</body>
</html>

В веб-браузере это будет выглядеть ТАК.

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

document.all.mytab.rows[индекс].innerText=новое_ значение

приведет к удалению строки и, возможно, к ошибкам выполнения сценария.

Коллекция строк и ячеек, как и любой массив, обладает свойством length, значением которого является количество элементов в коллекции.

document.all.mytab.rows. length //количество всех строк

document.all.mytab.cells.length //количество всех ячеек

document.all.mytab.rows[1].cells. length /*количество ячеек в строке с индексом 1*/

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

Добавление новой строки в таблицу производится с помощью метода insertRow(). Он возвращает ссылку на вновь созданную строку, которая затем используется для вставки ячеек. Ячейки вставляются в строку с помощью метода insertCell(индекс_ячейки). Данный метод возвращает ссылку на созданную ячейку, которая затем используется для задания содержимого ячейки. Ячейки вставляются в строку по порядку без пропусков, начиная с нулевой. Так нельзя создать ячейку с индексом 3, если ячейки с индексами 0, 1 и 2 еще не созданы. С другой стороны, можно последовательно создать любое количество ячеек в строке.

Таким образом, новая строка создается в три этапа:

сначала к таблице добавляется новая строка,
затем в нее вставляются ячейки,
после чего они заполняются значениями.

Рассмотрим пример добавления строки к существующей таблице и заполнения ее ячеек значениями.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Таблица</title>

</head>

<body >
<table id="mytab" border="1">
<thead>Список автомобилей</thead>
<th>Фамилия</th><th>Марка автомобиля</th><th>Гос. номер</th>
<tr id="r1">
<td>Иванов</td><td>Nissan Almera</td><td>с005со</td>
</tr>
<tr id="r2">
<td>Петров</td><td>Nissan Primera</td><td>с123то</td>
</tr>
<tr id="r3">
<td>Сидоров</td><td>ВАЗ 2109</td><td>с045со</td>
</tr>
<tr id="r4">
<td>Федоров</td><td>ГАЗ 3102</td><td>с405со</td>
</tr>
</table>
<script type="text/javascript">
newrow= document.all.mytab.insertRow()//добавляем новую строку
newcell=newrow.insertCell(0) //вставляем ячейку с индексом 0
newcell.innerText="Брагин //заполняем ячейку значением
newcell=newrow.insertCell(1)
newcell.innerHTML='<img src="images/foto3.jpg">'
newcell=newrow.insertCell(2)
newcell.innerHTML="а098вр"
</script>
</body>
</html>

В веб-браузере это будет выглядеть ТАК.

Для удаления строки таблицы служит метод deleteRow(индекс_строки). Параметр указывает номер удаляемой строки.

document.all.mytab.deleteRow(2)

Рассмотрим пример удаления строки.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Таблица</title>

</head>

<body >
<table id="mytab" border="1">
<thead>Список автомобилей</thead>
<th>Фамилия</th><th>Марка автомобиля</th><th>Гос. номер</th>
<tr id="r1">
<td>Иванов</td><td>Nissan Almera</td><td>с005со</td>
</tr>
<tr id="r2">
<td>Петров</td><td>Nissan Primera</td><td>с123то</td>
</tr>
<tr id="r3">
<td>Сидоров</td><td>ВАЗ 2109</td><td>с045со</td>
</tr>
<tr id="r4">
<td>Федоров</td><td>ГАЗ 3102</td><td>с405со</td>
</tr>
</table>
<script type="text/javascript">
document.all.mytab.deleteRow(2) //удаляем третью строку
newrow= document.all.mytab.insertRow() //добавляем новую строку
newcell=newrow.insertCell(0) //вставляем ячейку с индексом 0
newcell.innerText="Брагин" //заполняем ячейку значением
newcell=newrow.insertCell(1)
newcell.innerHTML='<img src="images/foto3.jpg">'
newcell=newrow.insertCell(2)
newcell.innerHTML="а098вр"
</script>
</body>
</html>

В веб-браузере это будет выглядеть ТАК.

Обсудить на форуме

Добавить на Memori.ru

веб-студия

SEVIDI

разработка веб-сайтов под ключ
обучающие программы для веб-разработчиков