Спасибо за помощь. Собственно вот что мне удалось накодить, позаимствовав идею с привязкой к ивентам он скрулл.
Вот:| Код |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
</head>
<body onload="init()">
<script>
function init()
{
var div=document.getElementById("mainDiv");
//div.innerHTML = window.navigator.appName;
//alert(window.navigator.appName);
//if(window.navigator.appName != "Microsoft Internet Explorer")
CreateScrollHeader(div,true,true);
}
//создает из любого дива, в котором находятся правильная (с thead и tbody) таблица
//таблицу с фиксированной верхней строкой
//и левым столбцом
//При этом если второй параметр истина, то фиксируется левый стоблец, если третий истина, то верхняя строка.
//Т.е. возможна независимая фиксация.
//FYI алгоритм удобнее всего рассматривать в FireBug(плагин -отладчик для FireFox)
function CreateScrollHeader(content, scrollHorizontal, scrollVertical)
{
var divContent = null; //слой урезанный до размеров table body именно на нем стоят скролл бары
var divHeaderRow = null; //Слой со строкой заголовка (возможно несколько строк)
var divHeaderColumn = null; //Слой с крайней левой колонкой
var divHeaderRowColumn = null;//
var headerRowFirstColumn = null;//Угловая ячейка
var x;
var y;
var horizontal = false;
var vertical = false;
var childElement = 0;
horizontal = scrollHorizontal;
vertical = scrollVertical;
if (content != null)
{
var left=0;
var top=0;
var currentNode = content;
while(currentNode)//Ищем координаты нашего слоя, для дальнейшего репозиционирования
{
left += currentNode.offsetLeft;
top += currentNode.offsetTop;
currentNode = currentNode.offsetParent;
}
divContent = content;
if (divContent.childNodes[childElement].tagName == null)
{
childElement = 1;
}
var headerRow = divContent.childNodes[childElement].childNodes[childElement];
x = divContent.childNodes[childElement].offsetWidth;
y = divContent.childNodes[childElement].offsetHeight;
divHeaderRow = divContent.cloneNode(true);
if (horizontal)
{
divHeaderRow.style.height = headerRow.offsetHeight + 1 + 'px';
divHeaderRow.style.overflow = "hidden";
//Вставляем заголовок, и поднимаем контент наверх, пряча его заголовк за нашим новым.
divContent.parentNode.insertBefore(divHeaderRow, divContent);
divContent.childNodes[childElement].style.position = "relative";
divContent.childNodes[childElement].style.top = "-" + String(headerRow.offsetHeight + 1) + 'px';
y = y - headerRow.offsetHeight;
}
divHeaderRowColumn = divHeaderRow.cloneNode(true);
headerRowFirstColumn = headerRow.childNodes[childElement].childNodes[childElement];
divHeaderColumn = divContent.cloneNode(true);
divContent.style.position = "relative";
if (vertical)
{
//Создаем левый столбец.
divContent.parentNode.insertBefore(divHeaderColumn, divContent);
divHeaderColumn.style.position = "absolute";
divHeaderColumn.style.left = left + 'px';
Позиционируем наш контент правее фиксированного столбца, и ниже заголовка
divContent.style.left = headerRowFirstColumn.offsetWidth + 'px';
divContent.style.top = -divContent.style.top + 'px';
divContent.childNodes[childElement].style.position = "absolute";
divContent.childNodes[childElement].style.left = -headerRowFirstColumn.offsetWidth + 'px';
}
else
{
divContent.style.left = "0px";
}
if (vertical)
{
//урезаем слой до размеров столбца и прячем скролы
divHeaderColumn.style.width = String(headerRowFirstColumn.offsetWidth + 1) + 'px';
divHeaderColumn.style.overflow = "hidden";
divHeaderColumn.style.zIndex = "99";
//Добавляем синхнонизацию на скролирование.
addScrollSynchronization(divHeaderColumn, divContent, "vertical");
x = x - headerRowFirstColumn.offsetWidth;
}
if (horizontal)
{
if (vertical)
{
//Создаем верхнюю угловую ячейку
divContent.parentNode.insertBefore(divHeaderRowColumn, divContent);
//Выравниваем наш контент, делаем так чтобы скролбары были вне таблицы.
divContent.style.width = String(divContent.offsetWidth - headerRowFirstColumn.offsetWidth + 17) + 'px';
divContent.style.position = "absolute";
divContent.style.top = String(top + divHeaderRow.offsetHeight) + 'px';
divContent.style.left = String(left + divHeaderColumn.offsetWidth -1) + 'px';
divContent.style.height = String(divContent.offsetHeight + 17) + 'px';
}
//Позиционируем верхнюю угловую ячейку
divHeaderRowColumn.style.position = "absolute";
divHeaderRowColumn.style.left = left+ 'px';
divHeaderRowColumn.style.top = top + 'px';
divHeaderRowColumn.style.width = String(headerRowFirstColumn.offsetWidth + 1) + 'px';
divHeaderRowColumn.overflow = "hidden";
divHeaderRowColumn.style.zIndex = "100";
divHeaderRowColumn.style.backgroundColor = "#ffffff";
}
if (horizontal)
{
//Добавляем синхроницацию по скролированию.
addScrollSynchronization(divHeaderRow, divContent, "horizontal");
}
if (horizontal || vertical)
{
}
}
}
// ********************************************************************************
// Synchronize div elements when scrolling
// from http://webfx.eae.net/dhtml/syncscroll/syncscroll.html
// ********************************************************************************
// This is a function that returns a function that is used
// in the event listener
function getOnScrollFunction(oElement, srcElement) {
return function () {
if (oElement._scrollSyncDirection == "horizontal" || oElement._scrollSyncDirection == "both")
oElement.scrollLeft = srcElement.scrollLeft;
if (oElement._scrollSyncDirection == "vertical" || oElement._scrollSyncDirection == "both")
oElement.scrollTop = srcElement.scrollTop;
};
}
// This function adds scroll syncronization for the fromElement to the toElement
// this means that the fromElement will be updated when the toElement is scrolled
function addScrollSynchronization(fromElement, toElement, direction) {
removeScrollSynchronization(fromElement);
fromElement._syncScroll = getOnScrollFunction(fromElement, toElement);
fromElement._scrollSyncDirection = direction;
fromElement._syncTo = toElement;
if (toElement.addEventListener) {
toElement.addEventListener("scroll", fromElement._syncScroll, false);
} else {
toElement.attachEvent("onscroll", fromElement._syncScroll);
}
}
// removes the scroll synchronization for an element
function removeScrollSynchronization(fromElement) {
if (fromElement._syncTo != null) {
if (fromElement._syncTo.removeEventListener) {
fromElement._syncTo.removeEventListener("scroll", fromElement._syncScroll, false);
} else {
fromElement._syncTo.detachEvent("onscroll", fromElement._syncScroll);
}
}
fromElement._syncTo = null;
fromElement._syncScroll = null;
fromElement._scrollSyncDirection = null;
}
</script>
<br/>
<br/>
<div style="width:500; height:500;" align="center">
<div id="mainDiv" style="height:300px; width:300px; overflow:auto;">
<table border="1" style="border-collapse:collapse;">
<thead>
<tr>
<th>sdasfasdfasdfds</th>
<th>sasdfasdsdfdds</th>
<th>sdasdfasdfds</th>
<th>sdasdfasdfasdfasdfds</th>
<th>sdasdfasdfds</th>
<th>sdasadfasdfds</th>
<th>sdasdfasdfds</th>
<th>sdasadfasdfds</th>
</tr>
</thead>
<tbody>
<tr>
<td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td>
</tr>
<tr>
<td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td>
</tr>
<tr>
<td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td>
</tr>
<tr>
<td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td>
</tr>
<tr>
<td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td>
</tr>
<tr>
<td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td>
</tr>
<tr>
<td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td>
</tr>
<tr>
<td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td>
</tr>
<tr>
<td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td>
</tr>
<tr>
<td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td>
</tr> <tr>
<td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td>
</tr>
<tr>
<td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td>
</tr>
<tr>
<td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td>
</tr>
<tr>
<td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td>
</tr>
<tr>
<td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td>
</tr>
<tr>
<td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td><td>sdsd</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
|
|
)