#1 19.07.06 15:47
[JavaScript] Интересная задачка || подвижная шапка у таблицы
Код: javascript:
function positionTop(element) { return positionLeft(element); } var rosterTables = new Array(); function initializeRosterTables(){ var f = document.forms[0]; if (f.FloatingRostersTableHeaders.value!='Yes') return; if (document.getElementById('bRosterTable_Head1')) { var table1Headers = new Array(); table1Headers[0] = document.getElementById('bRosterTable_Head1'); table1Headers[1] = document.getElementById('bRosterTable_Head2'); table1Headers[2] = document.getElementById('bRosterTable_Head3'); rosterTables[0] = {table:document.getElementById('bRosterTable'), headers : table1Headers, topShift : 0}; } var table2Headers = new Array(); table2Headers[0] = document.getElementById('eRosterTable_Head1'); table2Headers[1] = document.getElementById('eRosterTable_Head2'); var eRosterShift = -2; if (f.eRostView.value != "byName") eRosterShift = -14; if (document.getElementById('bRosterTable_Head1')){ rosterTables[1] = {table:document.getElementById('eRosterTable'), headers : table2Headers, topShift : eRosterShift}; } else { rosterTables[0] = {table:document.getElementById('eRosterTable'), headers : table2Headers, topShift : eRosterShift}; } for(var i = 0; i < rosterTables.length; i++){ for(var j=0; j<rosterTables[i].headers.length; j++) { if (rosterTables[i].headers[j]) rosterTables[i].headers[j].style.position = 'relative'; } } } function onScrollCustom(){ if (document.forms[0].FloatingRostersTableHeaders.value!='Yes') return; var scrollTop = document.body.scrollTop; for(var i = 0; i < rosterTables.length; i++){ var tablePositionTop = positionTop(rosterTables[i].table); var tableHeadersHeight = 0; for(var j=0; j<rosterTables[i].headers.length; j++) if (rosterTables[i].headers[j]) tableHeadersHeight += rosterTables[i].headers[j].offsetHeight; if((scrollTop > tablePositionTop - rosterTables[i].topShift) && (scrollTop < (tablePositionTop + rosterTables[i].table.offsetHeight - tableHeadersHeight))){ for(var j=0; j<rosterTables[i].headers.length; j++) { var units = (typeof scrollTop == "string") ? "px" : 0; if (rosterTables[i].headers[j]) rosterTables[i].headers[j].style.top = scrollTop - tablePositionTop + rosterTables[i].topShift + units; } } else { for(var j=0; j<rosterTables[i].headers.length; j++) if (rosterTables[i].headers[j]) rosterTables[i].headers[j].style.top = 0; } } } function onExpandCategory(){ if (document.forms[0].FloatingRostersTableHeaders.value!='Yes') return; for(var i = 0; i < rosterTables.length; i++){ for(var j=0; j<rosterTables[i].headers.length; j++) { if (rosterTables[i].headers[j]) rosterTables[i].headers[j].style.position = 'absolute'; if (rosterTables[i].headers[j]) rosterTables[i].headers[j].style.position = 'relative'; } } }
собственно проблема в том, что код вычисляет всё правильно и даже стили подменяет верно, но почему то в Gecko шапка стоит на месте при прокрутке, а в IE прилипает к верхней границе экрана, как и должна.
Как заставить этот код работать в Gecko?
Если нужно, могу выложить HTML код самой таблицы.
Offline
#3 19.07.06 18:28
Re: [JavaScript] Интересная задачка || подвижная шапка у таблицы
Задача.
Дано:
Существует таблица с переменным колличеством столбцов и возможностью колапса и экспанда, тоесть таблица представляет собой категаризованное представление. Колличество строк таблицы больше 100.
Найти:
Способ, чтобы при прокрутке страницы, её шапка (<thead>) всегда оставалась на верху. Однако на этой же страницы таких таблиц может быть более одной и нужно сделать так, чтобы если пользоватеть скролом достиг другой таблицы, то перемещается уже её шапка.
Способы решения:
Для ядра Mozilla, на котором работает IE способ приведён выше. Работает отлично.
Для браузеров с ядром Gecko решение неизвестно.
Offline
#5 20.07.06 17:48
Re: [JavaScript] Интересная задачка || подвижная шапка у таблицы
такое решение к сожалению не подходит, так как размер полей шапки компьютится в зависимости от того, как отображается табличка (заэкспандена или закалапсина).
Я придумал решение, смысл такой, я объявляю шапу дочерним объестом не от таблицы, а от документа, и тогда с позиционированием проблемы нет, проблема возникает с размером ячеик, её становиться невозможно растянуть, причём я перехватываю текущий внутренний размер окна браузера и учитывая паддинг вычисляю новый размер шапки, но почему то он не меняется :(
Тоесть проблема теперь в изменении размера <thead> и дочернем объекте <tr>.
Offline
#6 25.07.06 14:25
Re: [JavaScript] Интересная задачка || подвижная шапка у таблицы
Проблема решена, вот код решения, если кому интересно:
Код: javascript:
if (FF && rosterTables[i].headers[j]) { rosterTables[i].headers[j].style.position = 'absolute'; rosterTables[i].headers[j].style.display = ''; rosterTables[i].headers[j].style.width = '100%'; for (var k=0; k<rosterTables[i].headers[j].childNodes.length; k++) { if(rosterTables[i].headers[j].childNodes[k].tagName == 'TR') { rosterTables[i].headers[j].childNodes[k].style.width = '100%'; for (l=0; l<rosterTables[i].headers[j].childNodes[k].childNodes.length; l++) { if(rosterTables[i].headers[j].childNodes[k].childNodes[l].tagName == 'TH') { rosterTables[i].headers[j].childNodes[k].childNodes[l].noWrap = true; rosterTables[i].headers[j].childNodes[k].childNodes[l].style.width=[width]; } } } } rosterTables[i].headers[j].style.top = document.body.scrollTop; }
но появилась новая. Элементы <th> шапки надо сделать такого же размера как и у <td> тела таблицы. Так вот как получить их размер в пикселях, если он не задан, тоесть как его вычислить?
Пробовал такими способами:
elem.offsetWidth;
elem.clip.width;
elem.style.pixelWidth;
Но все они undefined. Что посоветуете?
Исправлено A-Lex (25.07.06 14:26)
Offline

