html中表格table凍結行和列
html中表格table凍結行和列
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>完美凍結列和行 </title>
<style type="text/css">
.FixedHeaderColumnsTableDiv
{
overflow: auto;
position: relative;
}
.FixedCell
{
position: relative;
top: expression(this.offsetParent.scrollTop);
left: expression(this.parentElement.offsetParent.scrollLeft);
z-index: 1800;
}
.FixedHeaderRow1
{
position: relative;
top: expression(this.offsetParent.scrollTop);
background-color: #ccc;
z-index: 300;
}
.FixedHeaderRow2
{
position: relative;
top: expression(this.offsetParent.scrollTop);
z-index: 290;
background-color:#ffccff;
}
.FixedDataColumn
{
position: relative;
left: expression(this.parentElement.offsetParent.parentElement.scrollLeft);
z-index: 200;
background-color: Aqua;
}
</style>
</head>
<body>
<div class="FixedHeaderColumnsTableDiv" style="width: 1000px; height: 100px">
<table border="0" cellpadding="0" cellspacing="0" width="1200px">
<tr class="FixedHeaderRow1">
<td class="FixedCell" style="width: 80px">
header1
</td>
<td class="FixedCell" style="width: 80px">
header2
</td>
<td class="FixedCell" style="width: 80px">
header3
</td>
<td class="FixedCell" style="width: 80px">
header4
</td>
<td style="width: 80px">
header5
</td>
<td style="width: 80px">
header6
</td>
<td style="width: 80px">
header7
</td>
<td style="width: 80px">
header8
</td>
<td style="width: 80px">
header9
</td>
<td style="width: 80px">
header10
</td>
</tr>
<tr class="FixedHeaderRow2">
<td class="FixedCell" style="width: 80px" align="center">
ss
</td>
<td class="FixedCell" style="width: 80px" align="center">
ss
</td>
<td class="FixedCell" style="width: 80px">
header16
</td>
<td class="FixedHeaderColumn1" colspan="7" align="center">
header17dddddddddddd
</td>
</tr>
<tr>
<td class="FixedDataColumn">
col1
</td>
<td class="FixedDataColumn">
col2
</td>
<td class="FixedDataColumn">
col3
</td>
<td class="FixedDataColumn">
col4
</td>
<td>
col5
</td>
<td>
col6
</td>
<td>
col7
</td>
<td>
col8
</td>
<td>
col9
</td>
<td>
col10
</td>
</tr>
<tr>
<td class="FixedDataColumn">
col1
</td>
<td class="FixedDataColumn">
col2
</td>
<td class="FixedDataColumn">
col3
</td>
<td class="FixedDataColumn">
col4
</td>
<td>
col5
</td>
<td>
col6
</td>
<td>
col7
</td>
<td>
col8
</td>
<td>
col9
</td>
<td>
col10
</td>
</tr>
<tr>
<td class="FixedDataColumn">
col1
</td>
<td class="FixedDataColumn">
col2
</td>
<td class="FixedDataColumn">
col3
</td>
<td class="FixedDataColumn">
col4
</td>
<td>
col5
</td>
<td>
col6
</td>
<td>
col7
</td>
<td>
col8
</td>
<td>
col9
</td>
<td>
col10
</td>
</tr>
<tr>
<td class="FixedDataColumn">
col1
</td>
<td class="FixedDataColumn">
col2
</td>
<td class="FixedDataColumn">
col3
</td>
<td class="FixedDataColumn">
col4
</td>
<td>
col5
</td>
<td>
col6
</td>
<td>
col7
</td>
<td>
col8
</td>
<td>
col9
</td>
<td>
col10
</td>
</tr>
<tr>
<td class="FixedDataColumn">
col1
</td>
<td class="FixedDataColumn">
col2
</td>
<td class="FixedDataColumn">
col3
</td>
<td class="FixedDataColumn">
col4
</td>
<td>
col5
</td>
<td>
col6
</td>
<td>
col7
</td>
<td>
col8
</td>
<td>
col9
</td>
<td>
col10
</td>
</tr>
<tr>
<td class="FixedDataColumn">
col1
</td>
<td class="FixedDataColumn">
col2
</td>
<td class="FixedDataColumn">
col3
</td>
<td class="FixedDataColumn">
col4
</td>
<td>
col5
</td>
<td>
col6
</td>
<td>
col7
</td>
<td>
col8
</td>
<td>
col9
</td>
<td>
col10
</td>
</tr>
<tr>
<td class="FixedDataColumn">
col1
</td>
<td class="FixedDataColumn">
col2
</td>
<td class="FixedDataColumn">
col3
</td>
<td class="FixedDataColumn">
col4
</td>
<td>
col5
</td>
<td>
col6
</td>
<td>
col7
</td>
<td>
col8
</td>
<td>
col9
</td>
<td>
col10
</td>
</tr>
</table>
</div>
</body>
</html>
以上第一種方式摘自：http://hi.baidu.com/zouyou626/item/b50ece1615bf0b781009b5c6
下面開始第二種方式：
Html代碼 收藏代碼
<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);
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>
</body>
</html>
這個第二種方式摘自：http://blog.csdn.net/jiacky/article/details/1746976
分享到：
Set集合下的子類HashSet、TreeSet
2014-06-09 22:41
瀏覽 2075
評論(0)
分類:Web前端
相關推薦
評論
發表評論
您還沒有登錄,請您登錄後再發表評論
LiYinlei的博客
LiYinlei
瀏覽: 5517 次
性別: Icon_minigender_1
來自: 北京
最近訪客 更多訪客>>
dylinshi126的博客
dylinshi126
huhongguang的博客
huhongguang
wangzhen1984815的博客
wangzhen1984815
zhujs的博客
zhujs
文章分類
全部博客 (11)
java基礎 (10)
html (1)
社區版塊
我的資訊 (0)
我的論壇 (0)
我的問答 (0)
存檔分類
2014-06 (1)
2014-04 (1)
2014-03 (9)
更多存檔...
最新評論
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
spa頁面，不同組件按需引入js，aliplayer
(function(d, s, id) { let js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) retur