Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Заморозка колонки сложных таблиц (https://javascript.ru/forum/events/47770-zamorozka-kolonki-slozhnykh-tablic.html)

visionp 06.06.2014 16:59

Заморозка колонки сложных таблиц
 
Нужно было написать скрипт который "заморозит" первые несколько колонок таблицы при её прокрутке влево. Таблица сложная в том плане что имеются объединение ячеек в первых колонках как по вертикали, так и по горизонтали. Написал скрипт который по сути выполняет эту задачу, но вот браузер (Chrome) начинает жутко висеть. Может кто подскажет как ускорить. С JS дружить начал совсем недавно....

/*Реакция на событие window.onscroll*/
function cloneTab(arg, oldBody) {
   arg.style.display = oldBody.getBoundingClientRect().left<0?"":"none";
   arg.style.top = oldBody.getBoundingClientRect().top + "px";
 }

 /*основная ф-ция клонирует tbody из таблицы, делает лишние ячейки display:none,
   в обратном порядке обходим ячейки в связи с тем что в колонках которые нужно заморозить
   могут быть объединения ячеек по вертикали и горизонтали*/
function freezColumn(countCells) {
  if (document.getElementById('freez') !== null) {return false;}  //если уже есть созданная скриптом таблица выходим из ф-ции ничего не создавая
  var tab = document.getElementsByTagName('table')[0];
  var tabBackground = getComputedStyle(tab, "").background;
  var oldBody = tab.tBodies[0];
  var newBodyes = oldBody.cloneNode(true);
    //следующая функцция пройдется по ячейкам таблицы и сделает их видимыми или невидимыми
  for(r=0; r<newBodyes.rows.length; r++) {
    for(c=newBodyes.rows[r].cells.length-1, i=newBodyes.rows[0].cells.length-countCells; i>0; c--, i--) {
	  newBodyes.rows[r].cells[c].style.display='none';
  	}
  }
  newBodyes.style.position = 'fixed';
  newBodyes.style.top = tab.tBodies[0].getBoundingClientRect().top + "px";
  newBodyes.style.left = "0px";
  newBodyes.style.zIndex = 0;
  newBodyes.id = "freez";
  newBodyes.style.marginTop="0px";
  newBodyes.style.marginLeft="0px";
  newBodyes.style.display="none";
  newBodyes.style.background = tabBackground;
  tab.appendChild(newBodyes);
  var newBody = document.getElementById('freez');
  window.addEventListener("scroll", function() {cloneTab(newBody, oldBody);});  //вешаем нашу функцию на событие
  return true;
}

freezColumn(3);  //заморозим первые три колонки


Часовой пояс GMT +3, время: 01:36.