PS: id="oFrozenTable"的table的直接父div要加上position:relative;否则当嵌套比较多的时候会有误。
<html>
<head>
<title>a</title>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<style>
td
{
height:30px;
width:180px;
}
</style>
<script language="JavaScript" type="text/JavaScript">
//+----------------------------------------------------------------------------
//
//功能描述:冻结表格
//
//输入参数:oFrozenTable 需要冻结的表格
// iFrozenRowHead 冻结表格前若干行
// iFrozenRowFoot 冻结表格后若干行
// iFrozenColLeft 冻结表格左边若干列
//
//-----------------------------------------------------------------------------
function FrozenTable(oFrozenTable, iFrozenRowHead, iFrozenRowFoot, iFrozenColLeft)
{
oFrozenTable.HeadRow = iFrozenRowHead;
var oDivMaster = oFrozenTable.parentElement;
if(oDivMaster.tagName != 'DIV') return;
if((oFrozenTable.offsetHeight > oDivMaster.offsetHeight) && (oFrozenTable.offsetWidth > oDivMaster.offsetWidth))
{
//创建并克隆LeftHead表格
if((iFrozenColLeft > 0) && (iFrozenRowHead > 0))
{
var oTableLH = document.createElement("TABLE");
var newTBody = document.createElement("TBODY");
oTableLH.insertBefore(newTBody);
oTableLH.id = "oTableLH";
oDivMaster.parentElement.insertBefore(oTableLH);
CloneTable(oFrozenTable, oTableLH, 0, iFrozenRowHead, iFrozenColLeft)
oTableLH.srcTable = oFrozenTable;
with(oTableLH.style)
{
zIndex = 804;
position = 'absolute'
pixelLeft = oDivMaster.offsetLeft;
pixelTop = oDivMaster.offsetTop;
}
}
//创建并克隆LeftFoot表格
if((iFrozenColLeft > 0) && (iFrozenRowFoot > 0))
{
var oTableLF = document.createElement("TABLE");
var newTBody = document.createElement("TBODY");
oTableLF.insertBefore(newTBody);
oTableLF.id = "oTableLF";
oDivMaster.parentElement.insertBefore(oTableLF);
CloneTable(oFrozenTable, oTableLF,oFrozenTable.rows.length - iFrozenRowFoot, oFrozenTable.rows.length, iFrozenColLeft)
oTableLF.srcTable = oFrozenTable;
with(oTableLF.style)
{
zIndex = 803;
position = 'absolute'
pixelLeft = oDivMaster.offsetLeft;
pixelTop = oDivMaster.offsetTop + oDivMaster.offsetHeight - oTableLF.offsetHeight - 16;
}
}
}
//创建DivHead、创建并克隆HeadTar表格
if((iFrozenRowHead > 0) && (oFrozenTable.offsetHeight > oDivMaster.offsetHeight))
{
var DivHead = document.createElement("DIV");
oDivMaster.parentElement.insertBefore(DivHead);
var oTableHead = document.createElement("TABLE");
var newTBody = document.createElement("TBODY");
oTableHead.id = "HeadTar";
oTableHead.style.position = "relative"
oTableHead.insertBefore(newTBody);
DivHead.insertBefore(oTableHead);
CloneTable(oFrozenTable, oTableHead, 0, iFrozenRowHead, -1)
HeadTar.srcTable = oFrozenTable;
with(DivHead.style)
{
overflow = "hidden";
zIndex = 802;
pixelWidth = oDivMaster.offsetWidth - 16
position = 'absolute';
pixelLeft = oDivMaster.offsetLeft;
pixelTop = oDivMaster.offsetTop;
}
}
//创建DivFoot、创建并克隆FootTar表格
if((iFrozenRowFoot > 0) && (oFrozenTable.offsetHeight > oDivMaster.offsetHeight))
{
var DivFoot = document.createElement("DIV");
oDivMaster.parentElement.insertBefore(DivFoot);
var oTableFoot = document.createElement("TABLE");
var newTBody = document.createElement("TBODY");
oTableFoot.insertBefore(newTBody);
oTableFoot.id = "FootTar";
oTableFoot.style.position = "relative"
DivFoot.insertBefore(oTableFoot);
CloneTable(oFrozenTable, oTableFoot, oFrozenTable.rows.length - iFrozenRowFoot, oFrozenTable.rows.length, -1)
oTableFoot.srcTable = oFrozenTable;
with(DivFoot.style)
{
overflow = "hidden";
zIndex = 801;
pixelWidth = oDivMaster.offsetWidth - 16
position = 'absolute'
pixelLeft = oDivMaster.offsetLeft;
pixelTop = oDivMaster.offsetTop + oDivMaster.offsetHeight - DivFoot.offsetHeight - 16;
}
}
//创建DivLeft、创建并克隆LeftTar表格
if((iFrozenColLeft > 0) && (oFrozenTable.offsetWidth > oDivMaster.offsetWidth))
{
var DivLeft = document.createElement("DIV");
oDivMaster.parentElement.insertBefore(DivLeft);
var oTableLeft = document.createElement("TABLE");
var newTBody = document.createElement("TBODY");
oTableLeft.insertBefore(newTBody);
oTableLeft.id = "LeftTar";
oTableLeft.style.position = "relative";
DivLeft.insertBefore(oTableLeft);
CloneTable(oFrozenTable, oTableLeft, 0, oFrozenTable.rows.length, iFrozenColLeft)
LeftTar.srcTable = oFrozenTable;
with(DivLeft.style)
{
overflow = "hidden";
zIndex = 800;
pixelWidth = oDivMaster.offsetWidth - 16
pixelHeight = oDivMaster.offsetHeight - 16
position = 'absolute'
pixelLeft = oDivMaster.offsetLeft;
pixelTop = oDivMaster.offsetTop;
}
}
//为主DIV附加onscroll事件
oDivMaster.attachEvent("onscroll", DivMasterScroll);
}
//+----------------------------------------------------------------------------
//
//功能描述:克隆表格
//
//输入参数:oSrcTable 源表格
// oNewTable 新表格
// iRowStart 克隆开始行
// iRowEnd 克隆结束行
// iColumnEnd 克隆结束列
//
//-----------------------------------------------------------------------------
function CloneTable(oSrcTable, oNewTable, iRowStart, iRowEnd, iColumnEnd)
{
//循环控制参数
var i, j, k = 0;
//新增行、列
var newTR, newTD;
//新表格宽度、高度
var iWidth = 0, iHeight = 0;
//拷贝Attributes、events and styles
oNewTable.mergeAttributes(oSrcTable);
//循环克隆指定行
for (i = iRowStart; i < iRowEnd; i++)
{
newTR = oNewTable.insertRow(k);
//拷贝Attributes、events and styles
newTR.mergeAttributes(oSrcTable.rows[i]);
iHeight += oSrcTable.rows[i].offsetHeight;
iWidth = 0;
//循环克隆指定列
for(j = 0; j < (iColumnEnd == -1 ? oSrcTable.rows[i].cells.length: iColumnEnd); j++)
{
newTD = oSrcTable.rows[i].cells[j].cloneNode(true);
iWidth += oSrcTable.rows[i].cells[j].offsetWidth;
newTR.insertBefore(newTD);
newTD.style.pixelWidth = oSrcTable.rows[i].cells[j].offsetWidth;
}
k++;
}
oNewTable.style.pixelWidth = iWidth;
oNewTable.style.pixelHeight = iHeight;
}
//+----------------------------------------------------------------------------
//
// 功能描述:主DIV的onscroll事件
//
// 输入参数:无
//
//-----------------------------------------------------------------------------
function DivMasterScroll()
{
var oDivMaster = window.event.srcElement;
if(document.getElementById('HeadTar') != null)
{
document.getElementById('HeadTar').style.pixelLeft = - oDivMaster.scrollLeft;
}
if(document.getElementById('FootTar') != null)
{
document.all('FootTar').style.pixelLeft = - oDivMaster.scrollLeft;
}
if(document.getElementById('LeftTar') != null)
{
document.all('LeftTar').style.pixelTop = - oDivMaster.scrollTop;
}
}
</script>
</head>
<body>
<div style="OVERFLOW: scroll;width:100%;height:140px;position:relative;">
<table id="oFrozenTable" border="1" cellspacing="1" cellpadding="0" bordercolor="#74c6f5" width="900" bgcolor="#ffffff">
<tr>
<td nowrap>1</td>
<td nowrap>2</td>
<td nowrap>3</td>
<td nowrap>4</td>
<td nowrap>5</td>
<td nowrap>6</td>
<td nowrap>7</td>
<td nowrap>8</td>
</tr>
<tr>
<td nowrap>1</td>
<td nowrap>1.1</td>
<td nowrap>1.2</td>
<td nowrap>1.3</td>
<td nowrap>1.4</td>
<td nowrap>1.5</td>
<td nowrap>1.6</td>
<td nowrap>1.7</td>
</tr>
<tr>
<td nowrap>2</td>
<td nowrap>2.1</td>
<td nowrap>2.2</td>
<td nowrap>2.3</td>
<td nowrap>2.4</td>
<td nowrap>2.5</td>
<td nowrap>2.6</td>
<td nowrap>2.7</td>
</tr>
<tr>
<td nowrap>3</td>
<td nowrap>3.1</td>
<td nowrap>3.2</td>
<td nowrap>3.3</td>
<td nowrap>3.4</td>
<td nowrap>3.5</td>
<td nowrap>3.6</td>
<td nowrap>3.7</td>
</tr>
<tr>
<td nowrap>4</td>
<td nowrap>4.1</td>
<td nowrap>4.2</td>
<td nowrap>4.3</td>
<td nowrap>4.4</td>
<td nowrap>4.5</td>
<td nowrap>4.6</td>
<td nowrap>4.7</td>
</tr>
</table>
</div>
<script language="javascript">
FrozenTable(oFrozenTable, 1, 0, 1);
</script>
</body>
</html>