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