Официальный сайт студ.городка НГТУ
Программирование и БД » [JavaScript] Интересная задачка || подвижная шапка у таблицы 

#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

#2  19.07.06 18:11

Maq
Профиль

Re: [JavaScript] Интересная задачка || подвижная шапка у таблицы

опиши задачу

Offline

#3  19.07.06 18:28

Re: [JavaScript] Интересная задачка || подвижная шапка у таблицы

Задача.
Дано:
Существует таблица с переменным колличеством столбцов и возможностью колапса и экспанда, тоесть таблица представляет собой категаризованное представление. Колличество строк таблицы больше 100.
Найти:
Способ, чтобы при прокрутке страницы, её шапка (<thead>) всегда оставалась на верху. Однако на этой же страницы таких таблиц может быть более одной и нужно сделать так, чтобы если пользоватеть скролом достиг другой таблицы, то перемещается уже её шапка.
Способы решения:
Для ядра Mozilla, на котором работает IE способ приведён выше. Работает отлично.
Для браузеров с ядром Gecko решение неизвестно.

Offline

#4  20.07.06 16:58

Maq
Профиль

Re: [JavaScript] Интересная задачка || подвижная шапка у таблицы

где-то видел решение данной проблемы без всяких скриптов.

там была первая таблица - заголовок
а вторая таблица с данными, она со скрулом
(примерно так)

мож найду решение, выложу.

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

#7  25.07.06 18:11

Re: [JavaScript] Интересная задачка || подвижная шапка у таблицы

Возьми линейку

 

#8  26.07.06 10:03

Re: [JavaScript] Интересная задачка || подвижная шапка у таблицы

Blackmore написал(а):

Возьми линейку

Очень смешно, Дэн

Offline

Программирование и БД » [JavaScript] Интересная задачка || подвижная шапка у таблицы 

ФутЕр:)

© Hostel Web Group, 2002-2025.   Сообщить об ошибке

Сгенерировано за 0.122 сек.
Выполнено 11 запросов.