DOM-прогулка по ячейкам таблицы

14.09.2022

Этот пример демонстрирует, как можно добраться до любой ячейки любой таблицы (x)HTML-документа с помощью DOM.

HTML-код:

Для примера я собрал обычную (x)HTML страницу и добавил в нее таблицу:



...
 

 

   
   
   
   
   
 

   
   
   
   
   

JavaScript


/* функция поиска и обработки таблиц */
function parseTable() {
// коллекция всех таблиц в документе
var tbls = document.getElementsByTagName("TABLE");
for (var i=0; i

В скрипте обрабатываются все элементы TABLE в HTML-документе, но если нужно добраться до ряда или ячейки только одной из таблиц, то задача упростится. Достаточно лишь указать этой таблице атрибут ID и обращаться к ней с помощью его значения (document.getElementById()).

Любая таблица в DOM — объект HTMLTableElement. В tbls соберем все таблицы HTML-документа. Свойство rows объекта HTMLTableElement (в данном случае: tbls[i]) возвращает коллекцию всех строк в таблице, включая и все элементы THEAD, TFOOT и TBODY. Поэтому не трудно посчитать количество рядов в таблице. Ряд в таблице — объект HTMLTableRowElement. Чтобы было видно, что до рядов таблицы (tbls[i].rows) удалось добраться, всем нечётным рядам изменим цвет фона на оранжевый и текста на белый.

Свойство cells объекта HTMLTableRowElement возвращает коллекцию ячеек данной строки. Соответственно, ячейка в ряду таблицы — объект HTMLTableCellElement. Чтобы было видно, что и до ячеек удалось добраться, последовательно перебирая их, напишем номер ряда и номер ячейки в этом ряду. А также, в каждом чётном ряду изменим цвет фона на зелёный и текста на белый каждой чётной ячейке.

Остаётся добавить, что функцию parseTable() надо запускать после загрузки HTML-документа в браузер. О том, как определить, загружен ли документ, можно посмотреть здесь: «Проблема window.onload() и ее решение». А полностью работающий пример — здесь.



Много комментариев (11) к “DOM-прогулка по ячейкам таблицы”

  1. NovikovMA :

    что же это получается?? Браузером все видно, а в самом html коде ничего нет??? А если страница будет качаться каким-нить w-get’ом, он скачает эти tr= и td= ???


    2007-01-17 at 9:05 pm
  2. Алексей :

    to NovikovMA конечено если качать wget-ом то получишь HTML код с пустой таблицей, но если открыть ее в браузере с поддержкой JavaScript , то скрипты исполнятся и таблица заполнится значениями. А вот чтобы посмотреть результат работы скрипта необходимо уже пользоваться средствами отладки как например Firebug для Firefox, он может показать HTML код ( точнее DOM-документ ) с результатом работы скриптов.


    2007-05-22 at 9:37 am
  3. Термех Мастер :

    Неплохо!!!
    Спасибо.


    2007-07-05 at 7:43 pm
  4. LongMan :

    2Алекей, 2NovikovMA:
    Если скрипт “вживлен” в код html, то нечего бояться, он будет загружен и отработает как надо.

    Кроме того, wget может закачивать рекурсивно, делая оффлайн-копии сайтов. Так что, думаю, и внешние скрипты может подгрузить, хотя не факт.


    2007-07-31 at 8:00 am
  5. Oleg :

    Полезная статья!


    2007-07-31 at 2:45 pm
  6. Оля :

    То что нужно. Чётко и ясно изложено. Спасибо!


    2008-02-14 at 12:30 am
  7. Misha Sokolow :

    Да и от меня вам респект


    2008-02-29 at 1:53 pm
  8. анонимус :

    А разве “свойство cells” работает в FF ?


    2008-03-01 at 1:36 pm
  9. анонимус :

    упс, звиняюсь за поспешность. Все работает


    2008-03-01 at 1:43 pm
  10. УК РФ :

    Спасибо искал давно но нигде нету, вроде не очень распространенна но очень нужна


    2008-04-21 at 10:37 am
  11. relaxreg :

    Спасибо, давно искал этот код!


    2008-09-02 at 9:11 pm