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

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

HTML-код:

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


<table>
 <tr>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
 </tr>
...
 <tr>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
 </tr>
</table>

JavaScript


/* функция поиска и обработки таблиц */
function parseTable() {
// коллекция всех таблиц в документе
var tbls = document.getElementsByTagName("TABLE");
for (var i=0; i<tbls.length; i++) {
// последовательнный перебор всех таблиц в коллекции
  for (var r=0; r<tbls[i].rows.length; r++) {
  // последовательнный перебор всех рядов в каждой таблице
    if (!(1&r)) {
    // нечетные ряды таблицы изменяется цвет фона и текста
      tbls[i].rows[r].style.background = "#F60";
      tbls[i].rows[r].style.color = "#FFF";
    }
    for (var c=0; c<tbls[i].rows[r].cells.length; c++) {
    // последовательный перебор всех ячеек
      var cls = tbls[i].rows[r].cells[c];
      // в каждую добавляется информация о ряде и ячейке
      var txt = document.createTextNode("tr="+r+"; td="+c);
      cls.appendChild(txt);
      if (1&c && 1&r) {
      // в четных ячейках в четных рядах в каждой таблице
      //  изменяется цвет фона и текста
        cls.style.background = "#3B9D00";
        cls.style.color = "#FFF";
      }
    }
  }
}
}

В скрипте обрабатываются все элементы 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= ???


  2. Алексей :

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


  3. Термех Мастер :

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


  4. LongMan :

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

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


  5. Oleg :

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


  6. Оля :

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


  7. Misha Sokolow :

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


  8. анонимус :

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


  9. анонимус :

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


  10. УК РФ :

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


  11. relaxreg :

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



22 queries 0.180 seconds.