JS冻结表格
来源：互联网 发布：数据库集群开端口 编辑：程序博客网 时间：2024/06/09 14:29
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>
- JS冻结表格
- JS冻结表格
- JS-Demo2：JavaScript版TableGrid，表格头、分页表格冻结,表格头可拉动
- JS-Demo2：JavaScript版TableGrid，表格头、分页表格冻结,表格头可拉动
- 冻结表格(tablefix)
- 表格列冻结
- 表格冻结第一行
- 模拟Excel冻结表格
- 前端#表格冻结
- jquery 表格冻结
- HTML表格冻结第一列
- 02-如何冻结拆分表格
- html+jquery 冻结表格表头
- jQuery实现表格冻结窗口
- JS表头冻结
- JS实现表头冻结
- js对象冻结
- jQuery实现表格冻结行和列
- javascriptでスクロール付きの表を生成する
- pythonwin 的 interactive 窗口无法正常启动的解决办法
- 学习设计模式的几本书
- 密码找回
- 寓言小故事
- JS冻结表格
- 从头开始看C++primer（4th）（一）——兄弟，跟我一起来
- javascript中getElementBy系列函数用法
- ASP.NET项目添加Log4Net后，发布后无法写日志
- 中国科学院地理资源所成功举办“京区第六届地理学研究生学术论坛”
- 如何搭建合作开发的环境
- C#正则表达式提取HTML中IMG标签的SRC地址
- JQuery Selector总结
- JS冻结表格
