|    | 
СИ-БИ техника | КВ техника | УКВ техника | Радиоизмерения | Защита от TVI | Источники питания | Софт | Расчеты | Справочники
Главная arrow Программирование arrow Java arrow Как получить доступ к нужному элементу таблицы  

Как получить доступ к нужному элементу таблицы

Проблема

Мне нужно из сценария получить доступ к элементу таблицы (строке или ячейке). Как это сделать?

Решение

Универсальное — воспользоваться средствами DOM. В этом случае иерархия вложенных друг в друга объектов будет такова:

экземпляр объекта— таблица (тег <table>). Самый "верхний" объект во всей табличной иерархии;

экземпляры объектов, соответствующие заголовку таблицы (тег <CAPTION>), секции "шапки" (тег <thead>), секции тела (тег <tbody>) и секции "поддона" таблицы (тег <tfoot>). Итого их четыре;

экземпляры объектов, соответствующие строкам таблицы (тег <tr>). Строки таблицы могут присутствовать только в секциях "шапки", тела и "поддона" таблицы;

экземпляры объектов, соответствующие ячейкам таблицы (тег <td> для обычной ячейки и <тн> для ячейки заголовка; такие ячейки часто применяются в "шапке" таблицы). Ячейки таблицы могут присутствовать только в строках;

экземпляры объектов, соответствующие тегам и фрагментам текста, находящимся в ячейках (в общем, содержимому ячеек). Содержимое ячеек может присутствовать только в тегах <td>.

Народ предупреждает!

Не забываем, что на "пути" от таблицы к строкам находятся еще и секции таблицы! Они присутствуют даже в том случае, если мы не зададим их в HTML-коде таблицы явно, с помощью соответствующих тегов; в этом случае в таблице будет неявно присутствовать только секция тела (тег <tbody>). Технология DOM в смысле правильности HTML-кода очень щепетильна.

Пример 1

Вот HTML-код, создающий на Web-странице небольшую таблицу с тремя столбцами и пятью строками (из них— одна строка "шапки" и одна строка "поддона"), а также заголовком:

<TABLE ID="tab">

<САРТION>Это таблица</САРТION> <HEAD> <TR>

<ТD>Столбец 1</TD>

<ТD>Столбец 2</TD>

<ТD>Столбец 3</TD>

</TR>

</THEAD>

<TBODY>

<TR>

<TD>1</TD> <TD>2</TD> <TD>3</TD> </TR> <TR>

<TD>4</TD> <TD>5</TD> <TD>6</TD> </TR> <TR>

<TD>7</TD> <TD>8</TD> <TD>9</TD> </TR> </TBODY>

<TFOOT> <TR>

<TD>1</TD> <TD>2</TD> <TD>3</TD> </TR> </TFOOT> </TABLE>

Создав эту таблицу, мы можем получить доступ к любому ее элементу с помощью свойств DOM.

var tabObject = document.all["tab"];

var tabCaption = tabObject.firstChild.firstChild.nodeValue;

Этот сценарий помещает в переменную tabCaption текст заголовка таблицы. Здесь мы сначала получаем доступ к экземпляру объекта — заголовку таблицы (тегу <caption>), потом к экземпляру объекта — фрагменту текста, который помещен в тег <caption>, и уже затем обращаемся к свойству nodeValue фрагмента текста, чтобы получить сам текст заголовка таблицы.

var cell5Text = tabObject.childNodes[2].childNodes[1].childNodes[1].firstChild.nodeValue;

А этот сценарий помещает в переменную cell5Text текстовое содержимое второй ячейки второй строки секции тела таблицы. Давайте разберем путь к этому текстовому содержимому по частям:

tabObject — экземпляр объекта — таблица;

childNodes [2] — секция тела таблицы (третий по счету потомок экземпляра объекта — таблицы, после заголовка и секции "шапки");

childNodes [1] — вторая строка секции тела таблицы;

childNodes [1] — вторая ячейка второй строки секции тела таблицы;

firstChild — фрагмент текста — содержимое второй ячейки второй строки секции тела таблицы;

nodeValue — значение этого фрагмента текста, т. е. сам текст.

tabObject.childNodes[3].firstChild.childNodes[2].firstChild.nodeValue ="Итог по столбцу 3";

А этот сценарий поместит в третью ячейку единственной строки секции "поддона" таблицы текст "Итог по столбцу 3".

Пример 2

"Урезанная" модификация предыдущей таблицы:

<TABLE ID="tab"> <TR>

<TD>1</TD>

<TD>2</TD>

<TD>3</TD> </TR> <TR>

<TD>4</TD>

<TD>5</TD>

<TD>6</TD> </TR> <TR>

<TD>7</TD>

<TD>8</TD>

<TD>9</TD> </TR> </TABLE>

Здесь мы не задали ни заголовок, ни секции таблицы. (Пожалуй, такие таблицы встречаются в практике Web-дизайна чаще всего.)

Вспоминаем, что предупреждал нас народ. Если в таблице не были явно, с помощью соответствующих тегов, заданы секции, секция тела все равно неявно присутствует. Она является единственным потомком экземпляра объекта — таблицы, т. е. тега <table>. Значит, чтобы поместить в переменную cell5Text текстовое содержимое второй ячейки второй строки секции тела таблицы, мы должны написать такой сценарий:

var tabObject = document.all["tab"];

var cell5Text = tabObject.firstChild.childNodes[1].childNodes[1]. firstChild.nodeValue;

Разберем наш путь по частям:

tabObject — экземпляр объекта — таблица;

firstchild— секция тела таблицы (единственная, неявно присутствующая, если секции не были заданы явно, тегами);

childNodes [1] — вторая строка секции тела таблицы;

childNodes [1] — вторая ячейка второй строки секции тела таблицы;

firstchild — фрагмент текста — содержимое второй ячейки второй строки секции тела таблицы;

nodeValue — значение этого фрагмента текста, т. е. сам текст.

RLBN.ru - Электроника и компьютеры
0.1484
Hosted by uCoz