Blog. Just Blog

Таблица с фиксированной шапкой на JavaScript

Версия для печати Добавить в Избранное Отправить на E-Mail 14.04.2016 | Категория: Web-мастеру и не только | Автор: ManHunter
В одном из рабочих проектов появилась необходимость выводить достаточно длинную таблицу с большим количеством однотипных колонок. При вертикальной прокрутке заголовок таблицы уезжает, и уже на втором скролле становится очень сложно сориентироваться, какая из колонок к чему относится. Проблема решается с помощью создания фиксированной шапки у таблицы, которая всегда будет отображаться, пока "родной" заголовок таблицы находится за пределами видимой области страницы.

Начнем с верстки. Для корректной работы скрипта нужно выполнение всего несколько требований. Таблица, у которой будет фиксироваться заголовок, обязательно должна иметь атрибут id и фиксированную ширину. Шапка таблицы должна быть обрамлена тегом thead. Например:
Code (HTML) : Убрать нумерацию
  1. <table id="my_table" style="width:980px;" rules="all">
  2. <thead>
  3. <tr>
  4.     <th style="width:20px;">N</th>
  5.     <th style="background: #BABABA;">Наименование</th>
  6.     <th>Описание</th>
  7.     <th style="width:60px;">Цена</th>
  8.     <th style="width:60px;">Количество</th>
  9.     <th style="width:60px;">Сумма</th>
  10. </tr>
  11. </thead>
  12.  
  13. <tr>
  14.     <td>1</td>
  15.     <td>Предмет 1</td>
  16.     <td>Описание 1</td>
  17.     <td>26</td>
  18.     <td>97</td>
  19.     <td>2522</td>
  20. </tr>
  21.  
  22. ... остальное содержимое таблицы
  23.  
  24. </table>
Обычно при верстке HTML я никогда не использую thead, но тут этот элемент необходим, чтобы обозначить границы и содержимое шапки таблицы. Дополнительных обрамляющих элементов для таблицы не требуется.

А вот сам скрипт, который надо подключить к странице. Можно вынести его в отдельный файл или добавить прямо в HTML-код, кому как нравится.
Code (JavaScript) : Убрать нумерацию
  1. //-----------------------------------------------------
  2. // Фиксированный заголовок у таблицы
  3. //-----------------------------------------------------
  4. // by ManHunter / PCL (www.manhunter.ru)
  5. //-----------------------------------------------------
  6. fix_header={
  7.   'fixed_el': null,
  8.   'new_table': null,
  9.  
  10.   bind : function(el, eventName, callback) {
  11.     if (el) {
  12.       if (el.addEventListener) {
  13.         el.addEventListener(eventName, callback, false);
  14.       }
  15.       else if (el.attachEvent) {
  16.         el.attachEvent("on" + eventName, callback);
  17.       }
  18.     }
  19.   },
  20.  
  21.   get_position: function(el) {
  22.     var offsetLeft = 0, offsetTop = 0;
  23.     do {
  24.       offsetLeft += el.offsetLeft;
  25.       offsetTop  += el.offsetTop;
  26.     }
  27.     while (el = el.offsetParent);
  28.     return {x:offsetLeft, y:offsetTop};
  29.   },
  30.  
  31.   chk_position: function() {
  32.     var doc = document.documentElement;
  33.     var body = document.body;
  34.  
  35.     if (typeof(window.innerWidth) == 'number') {
  36.       my_width = window.innerWidth;
  37.       my_height = window.innerHeight;
  38.     }
  39.     else if (doc && (doc.clientWidth || doc.clientHeight)) {
  40.       my_width = doc.clientWidth;
  41.       my_height = doc.clientHeight;
  42.     }
  43.     else if (body && (body.clientWidth || body.clientHeight)) {
  44.       my_width = body.clientWidth;
  45.       my_height = body.clientHeight;
  46.     }
  47.  
  48.     if (doc.scrollTop) { dy=doc.scrollTop; } else { dy=body.scrollTop; }
  49.  
  50.     var coord=fix_header.get_position(fix_header.fixed_el);
  51.  
  52.     // Заголовок таблицы еще на экране или таблица уже не на экране
  53.     if (coord.y>dy || (coord.y+fix_header.fixed_el.clientHeight)<dy) {
  54.       fix_header.new_table.style.left='-9999px';
  55.     }
  56.     // Заголовок уже прокручен вверх
  57.     else {
  58.       fix_header.new_table.style.left=
  59.         fix_header.fixed_el.getBoundingClientRect().left+'px';
  60.     }
  61.   },
  62.  
  63.   fix: function (id) {
  64.     var tmp,st;
  65.     var ftable=document.getElementById(id);
  66.     if (ftable) {
  67.       if (this.new_table!=null) {
  68.         if (this.new_table.parentNode!=undefined) {
  69.           this.new_table.parentNode.removeChild(this.new_table);
  70.         }
  71.         this.new_table=null;
  72.       }
  73.       else {
  74.         this.bind(window,'scroll',this.chk_position);
  75.         this.bind(window,'resize',this.chk_position);
  76.       }
  77.  
  78.       this.fixed_el=ftable;
  79.  
  80.       tmp=ftable.getElementsByTagName('thead');
  81.       if (tmp) {
  82.         var fthead=tmp[0];
  83.  
  84.         new_table=document.createElement('table');
  85.  
  86.         for(var i in this.fixed_el.style) {
  87.           if (this.fixed_el.style[i]!='') {
  88.             try {
  89.               new_table.style[i]=this.fixed_el.style[i];
  90.             }
  91.             catch (e) {};
  92.           }
  93.         }
  94.  
  95.         new_table.id='fixed_'+id;
  96.         new_table.rules='all';
  97.         new_table.border='1';
  98.         new_table.style.position='fixed';
  99.         new_table.style.left='-9999px';
  100.         new_table.style.top='0px';
  101.  
  102.         var cln = fthead.cloneNode(true);
  103.         var cth=cln.getElementsByTagName('th');
  104.         var fth=fthead.getElementsByTagName('th');
  105.  
  106.         for(var i=0; i<fth.length; i++) {
  107.           cth[i].style.width=(fth[i].clientWidth+(window.opera?1:0))+'px';
  108.           cth[i].style.paddingLeft='0';
  109.           cth[i].style.paddingRight='0';
  110.         }
  111.         new_table.appendChild(cln);
  112.  
  113.         this.fixed_el.parentNode.appendChild(new_table);
  114.         this.new_table=new_table;
  115.         this.chk_position();
  116.       }
  117.     }
  118.   }
  119. };
Скрипт подключается к таблице всего одной командой. Она может быть вызвана по событию загрузки контента, просто со страницы из скрипта под таблицей, после динамической отрисовки таблицы скриптом или после вставки ее в DOM.
Code (JavaScript) : Убрать нумерацию
  1. fix_header.fix('my_table');
В целом решение получилось кроссбраузерным, успешно протестированы все современные и большинство старых браузеров. Работает быстро, легко подключается и не требует никаких посторонних библиотек. Есть некоторое ограничения, которые не влияют на решение моей задачи. Например, скрипт скорее всего не будет работать, если на странице располагается несколько таблиц и хочется сделать фиксированный заголовок для каждой. Также могут возникнуть проблемы с отображением заголовка со сложной версткой с объединенными столбцами и ячейками.

Рабочий пример скрипта из статьи и таблицы с фиксированным заголовком можно посмотреть на демонстрационной странице.

Поделиться ссылкой ВКонтакте
Просмотров: 9537 | Комментариев: 8

Внимание! Статья опубликована больше года назад, информация могла устареть!

Комментарии

Отзывы посетителей сайта о статье
ManHunter (28.09.2017 в 11:17):
Ну так чо сам не сделал?
Михаил (28.09.2017 в 11:11):
Не респонсив хоть кто может сделать
ManHunter (04.05.2016 в 12:09):
Нет предела совершенству :)
Lyfeh (04.05.2016 в 11:06):
Приветствую ManHunter! У меня была похожая идея, но никак руки не доходили. Ваш труд очень выручил меня в реализации плавающей многоэтажной шапки. Большое человеческое спасибо! Добавлю от себя немного фикса:
1) В вашем варианте не учитывается "colgroup", доработал:
// необходимо добавить после 84 строчки  new_table=document.createElement('table');

tmp = ftable.getElementsByTagName('colgroup');
if (tmp) {
  var fcolgroup=tmp[0];
  if (fcolgroup) {
    var clncolgroup = fcolgroup.cloneNode(true);
    new_table.appendChild(clncolgroup);
  }
}

2) при открытии html шапка отображается сверху, пофиксил добавил в 53 строчку знак "=" (т.е. условие было coord.y>dy, 0>0 шапка отображалась, сделал coord.y>=dy, 0>=0 шапки нет, все ОК), получилось:
// Заголовок таблицы еще на экране или таблица уже не на экране
if (coord.y>=dy || (coord.y+fix_header.fixed_el.clientHeight)<dy) {
ManHunter (25.04.2016 в 17:20):
Сайт без скриптов подобен сайту со скриптами, только без скриптов :)

Хотя по факту не меньше половины современных сайтов с отключенными скриптами даже не отобразятся корректно, не говоря уже о работоспособности, тут их будет чуть меньше, чем все.
Infocatcher (25.04.2016 в 11:53):
Угу. Хотя все равно приятнее, когда сайт без скриптов работает.
ManHunter (25.04.2016 в 11:43):
Так если б position:sticky еще и всеми браузерами поддерживалось, не пришлось бы ничего изобретать. А так один фиг для совместимости точно так же пришлось бы делать свои решения.
Infocatcher (25.04.2016 в 11:18):
Жаль, вот эта экспериментальная штука как-то подзастряла:
https://developer.mozilla.org/..._positioning

Добавить комментарий

Заполните форму для добавления комментария
Имя*:
Текст комментария (не более 2000 символов)*:

*Все поля обязательны для заполнения.
Комментарии, содержащие рекламу, ненормативную лексику, оскорбления и т.п., а также флуд и сообщения не по теме, будут удаляться. Нарушителям может быть заблокирован доступ к сайту.
Это я :-)
Если программист в девять утра уже на работе, значит он там же и ночевал
Главная страница Web-мастеру и не только Образ мышления: Assembler Мои программы Software Темная сторона Силы Обзоры техники А еще я туда ем! Жизнь в оффлайне Всякая всячина
Карта сайта Ссылки Обратная связь Правила сайта Настройки сайта RSS-канал
Ограничение по возрасту 16+ Материалы, опубликованные на этом сайте, не рекомендуются к просмотру лицам в возрасте до 16 лет без присутствия взрослых.
Метки статей
.NET (32), AJAX (5), Assembler (371), COM (42), CSS (44), Exif (15), FASM (8), Firefox (7), HDD (17), Hello Teddy (9), HTML (53), iconBIT (4), JavaScript (76), MySQL (13), Nikon (19), PDF (10), PHP (122), Samsung (6), SEO (12), Sublime Text (9), TintonLife (4), UGREEN (4), Windows 7 (66), аккумуляторы (23), аксессуары (12), анализаторы файлов (8), архиваторы (6), аттракционы (7), безопасность (55), браузеры (16), бытовая техника (20), варенье (19), ВВЦ (9), ВДНХ (14), видео (20), Воробьевы горы (9), вторые блюда (126), выпечка (30), выставки (120), генератор ПСЧ (10), графика (121), десерты (31), Египет (9), заготовки на зиму (47), закуска (22), закуска к пиву (25), зарядные устройства (24), защита (15), зоопарки (10), игры (36), иконки (22), интерфейс (26), исследование защиты (322), каша (4), клавиатура (7), Коломенское (37), консоль (7), концерты (52), Кузьминки (4), куклы (27), ледяные скульптуры (6), мои программы (69), мониторы (6), музеи (78), мультимедиа (82), мясо (62), напитки (14), ноутбуки (8), обфускация (7), окна (71), оформление сайта (51), парки Москвы (7), песчаные скульптуры (13), плееры (10), подводная съемка (4), поздравления (131), полезные функции (42), прохождения (4), процессы (25), птица (22), путешествия (26), распаковка (22), реверсинг (52), регулярные выражения (5), рыба (35), салаты (19), сброс триала (4), сеть (37), система (178), Сокольники (8), соусы (15), супы (14), телефоны (10), Тунис (6), умный дом (14), файлы справки (6), фаст-фуд (18), фестиваль цветов (5), флешки (5), фото (23), хеши (17), числа (8), юмор (12), яйца (19), Яндекс (11)
Вам помог этот сайт?
Сказать спасибо! Поблагодарили 35,665 раз
<< 2024 - ДЕКАБРЬ >>
Пн Вт Ср Чт Пт Сб Вс
            1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31          
День информатики
День заказов подарков и написания писем Деду Морозу
Нашли на сайте орфографическую ошибку? Выделите ее мышкой и нажмите
Ctrl
+
Enter
Буду очень благодарен, если размеcтите мою кнопочку:
Личный блог ManHunter'а
Valid CSS Valid XHTML 1.0 Transitional Valid mobileOK Basic Valid RSS
Яндекс тИЦ: {YANDEX_TIC} Яндекс ИКС: 360
Сейчас я слушаю
---
Имя:

Сообщение:

Осталось символов: 200

   
-
Наверх
Powered by PCL's Speckled Band Engine 0.2 RC3
© ManHunter / PCL, 2008-2024
При использовании материалов ссылка на сайт обязательна
Время генерации: 0.07 сек. / MySQL: 2 (0.0114 сек.) / Память: 4.5 Mb
Наверх