HTML表格冻结行列
2013年10月04日
⁄ 综合
⁄ 共 9305字 ⁄ 字号
小 中 大
//+----------------------------------------------------------------------------
//
//功能描述：可以按照要求冻结表格前若干行、后若干行、左边若干列
//
//创建日期：2007-08-16 by YeJia
//
//修改记录：
//
//调用示例：
/**//* <html>
<head>
<title>表格行列冻结示例</title>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<style>
td
{
height:30px;
width:180px;
}
</style>
</head>
<body>
<div style="OVERFLOW: scroll;width:100%;height:140px;">
<table id="oFrozenTable" border="1" cellspacing="1" cellpadding="0" bordercolor="#74c6f5" width="900" bgcolor="#ffffff">
<tr>
<td nowrap>第一列</td>
<td nowrap>第二列</td>
<td nowrap>第三列</td>
<td nowrap>第四列</td>
<td nowrap>第无列</td>
<td nowrap>第六列</td>
<td nowrap>第七列</td>
<td nowrap>第八列</td>
</tr>
<tr>
<td nowrap>第一行</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>第二行</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>第三行</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>第四行</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" src="frozenTable.js"></script>
<script language="javascript">
FrozenTable(oFrozenTable, 1, 1, 1);
</script>
</body>
</html>
*/
//-----------------------------------------------------------------------------
//+----------------------------------------------------------------------------
//
//功能描述：冻结表格
//
//输入参数：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)
