Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 06.06.2014, 16:59
Новичок на форуме
Отправить личное сообщение для visionp Посмотреть профиль Найти все сообщения от visionp
 
Регистрация: 06.06.2014
Сообщений: 1

Заморозка колонки сложных таблиц
Нужно было написать скрипт который "заморозит" первые несколько колонок таблицы при её прокрутке влево. Таблица сложная в том плане что имеются объединение ячеек в первых колонках как по вертикали, так и по горизонтали. Написал скрипт который по сути выполняет эту задачу, но вот браузер (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);  //заморозим первые три колонки

Последний раз редактировалось visionp, 06.06.2014 в 17:14.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Свойство column-width, как обратиться к контенту колонки? pro100set Общие вопросы Javascript 8 12.02.2013 19:48
Не совсем обычный фрейм и выезжающий текст при наводе на картинку. amaz245 Элементы интерфейса 35 25.12.2010 17:29
Несколько одинаковых таблиц. Обращение к отдельным элементам в них. zaytsewa Элементы интерфейса 7 11.11.2010 09:08
IFRAME согласно разрешения экрана и ширины колонки?? reDDevil Элементы интерфейса 0 30.10.2009 19:11