當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

实现锁死的有滚动条的div的表格(datagird)

發(fā)布時間：2025/3/13 编程问答 34 豆豆

生活随笔收集整理的這篇文章主要介紹了实现锁死的有滚动条的div的表格(datagird) 小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

JS框架使用Jquery

最終效果：

代碼結(jié)構(gòu)：

代碼：

<HEAD><TITLE>new document</TITLE> <META name=Generator content=EditPlus,Microshaoft> <META name=Author content=EditPlus,Microshaoft> <META name=Keywords content=EditPlus,Microshaoft> <META name=Description content=EditPlus,Microshaoft> <SCRIPT type=text/javascript src="jquery-1.9.1.js"></SCRIPT> <style type="text/css">.tableFix{Z-INDEX: 50; POSITION: relative; BACKGROUND-COLOR: #fff; OVERFLOW: hidden; LEFT: 0px;}.tableHead{Z-INDEX: 45; POSITION: relative; BACKGROUND-COLOR: #fff; OVERFLOW: hidden; LEFT: 0px;}.tableColumn{Z-INDEX: 40; POSITION: relative; BACKGROUND-COLOR: #fff; OVERFLOW: hidden; LEFT: 0px;}.tableData{Z-INDEX: 35; POSITION: relative; OVERFLOW: scroll; LEFT: 0px;}.sa {color: #000000;font-size: 12px;font-family: "微軟雅黑";} </style> <SCRIPT type=text/javascript> $(document).ready(function () {FixTable("MyTable", 1,600, 300,47,30); }); /** _tableHead里的table的要比寬度應(yīng)該要比_tableData里的table的寬度多17(在_tableHead的最后一列上),這樣可達到上下表格包括滾動條上下完全對齊的效果參數(shù)： TableID：table的ID FixColumnNumber:鎖定的列的個數(shù) width：div的寬度 height:div的高度 headWidth:鎖死列表頭的寬度 headHeight:表頭的高度 */ function FixTable(TableID,FixColumnNumber, width, height,headWidth,headHeight) {$("#" + TableID + "_tableLayout").css("width",width);$("#" + TableID + "_tableLayout").css("height",height+headHeight);$("#" + TableID + "_tableFix").css("width",(headWidth+5)*FixColumnNumber);$("#" + TableID + "_tableFix").css("height",headHeight);$("#" + TableID + "_tableHead").css("width",width);$("#" + TableID + "_tableHead").css("height",headHeight);$("#" + TableID + "_tableHead").css("top",headHeight*-1);$("#" + TableID + "_tableColumn").css("width",headWidth);$("#" + TableID + "_tableColumn").css("height",height-17+headHeight);$("#" + TableID + "_tableColumn").css("top",(headHeight*2*-1));$("#" + TableID + "_tableData").css("width",width);$("#" + TableID + "_tableData").css("height",height);$("#" + TableID + "_tableData").css("top",(headHeight*2+(height-17))*-1);$("#" + TableID + "_tableData").scroll(function () {$("#" + TableID + "_tableHead").scrollLeft($("#" + TableID + "_tableData").scrollLeft());$("#" + TableID + "_tableColumn").scrollTop($("#" + TableID + "_tableData").scrollTop());}); } </SCRIPT> </HEAD> <BODY style="margin:0">  <DIV style="OVERFLOW: hidden" id='MyTable_tableLayout'>  <DIV style="WIDTH: 85px; HEIGHT: 20px;" class="tableFix" id='MyTable_tableFix'> <TABLE style="width:2205;" border='0' cellSpacing='0' cellPadding='0'> <THEAD> <TR> <TH width="2"></TH> <TH width="5" background="image/jk8-12-1.png" height="30"></TH> <TH width="35" background="image/jk8-1122.png" class="sa"><input type="checkbox" id='selctAllCheckbox' onclick="doSelctAllCheckbox()"/></TH> <TH width="5" background="image/jk8-13-1.png"></TH> <TH width="4"></TH> <TH > </TH> </TR> </THEAD> </table> </div>  <DIV style="WIDTH: 583px; HEIGHT: 20px;" class="tableHead" id='MyTable_tableHead'> <TABLE style="width:2217;" border='0' cellSpacing='0' cellPadding='0'> <THEAD> <TR> <TH width="2"></TH> <TH width="5" background="image/jk8-12-1.png" height="30"></TH> <TH width="35" background="image/jk8-1122.png" class="sa"> </TH> <TH width="5" background="image/jk8-13-1.png"></TH> <TH width="4"></TH> <TH width="5" background="image/jk8-12-1.png" height="30"></TH> <TH width="45" background="image/jk8-1122.png" class="sa">客戶名</TH> <TH width="5" background="image/jk8-13-1.png"></TH> <TH width="4"></TH> <TH width="5" background="image/jk8-12-1.png" height="30"></TH> <TH width="45" background="image/jk8-1122.png" class="sa">區(qū)域</TH> <TH width="5" background="image/jk8-13-1.png"></TH> <TH width="4"></TH> <TH width="5" background="image/jk8-12-1.png" height="30"></TH> <TH width="70" background="image/jk8-1122.png" class="sa">商圈</TH> <TH width="5" background="image/jk8-13-1.png"></TH> <TH width="4"></TH> <TH width="5" background="image/jk8-12-1.png" height="30"></TH> <TH width="70" background="image/jk8-1122.png" class="sa">業(yè)態(tài)</TH> <TH width="5" background="image/jk8-13-1.png"></TH> <TH width="4"></TH> <TH width="5" background="image/jk8-12-1.png" height="30"></TH> <TH width="70" background="image/jk8-1122.png" class="sa">新品比例</TH> <TH width="5" background="image/jk8-13-1.png"></TH> <TH width="4"></TH> <TH width="5" background="image/jk8-12-1.png" height="30"></TH> <TH width="80" background="image/jk8-1122.png" class="sa">順銷品牌比例</TH> <TH width="5" background="image/jk8-13-1.png"></TH> <TH width="4"></TH> <TH width="5" background="image/jk8-12-1.png" height="30"></TH> <TH width="80" background="image/jk8-1122.png" class="sa">雙低品牌比例</TH> <TH width="5" background="image/jk8-13-1.png"></TH> <TH width="4"></TH> <TH width="5" background="image/jk8-12-1.png" height="30"></TH> <TH width="80" background="image/jk8-1122.png" class="sa">責(zé)任品牌比例</TH> <TH width="5" background="image/jk8-13-1.png"></TH> <TH width="4"></TH> <TH width="5" background="image/jk8-12-1.png" height="30"></TH> <TH width="80" background="image/jk8-1122.png" class="sa">階段性培育</TH> <TH width="5" background="image/jk8-13-1.png"></TH> <TH width="4"></TH> <TH width="5" background="image/jk8-12-1.png" height="30"></TH> <TH width="80" background="image/jk8-1122.png" class="sa">店鋪面積</TH> <TH width="5" background="image/jk8-13-1.png"></TH> <TH width="4"></TH> <TH width="5" background="image/jk8-12-1.png" height="30"></TH> <TH width="80" background="image/jk8-1122.png" class="sa">經(jīng)營卷煙面積</TH> <TH width="5" background="image/jk8-13-1.png"></TH> <TH width="4"></TH> <TH width="5" background="image/jk8-12-1.png" height="30"></TH> <TH width="80" background="image/jk8-1122.png" class="sa">新品接受度</TH> <TH width="5" background="image/jk8-13-1.png"></TH> <TH width="4"></TH> <TH width="5" background="image/jk8-12-1.png" height="30"></TH> <TH width="80" background="image/jk8-1122.png" class="sa">溝通行為特征</TH> <TH width="5" background="image/jk8-13-1.png"></TH> <TH width="4"></TH> <TH width="5" background="image/jk8-12-1.png" height="30"></TH> <TH width="80" background="image/jk8-1122.png" class="sa">進貨量</TH> <TH width="5" background="image/jk8-13-1.png"></TH> <TH width="4"></TH> <TH width="5" background="image/jk8-12-1.png" height="30"></TH> <TH width="80" background="image/jk8-1122.png" class="sa">進貨額</TH> <TH width="5" background="image/jk8-13-1.png"></TH> <TH width="4"></TH> <TH width="5" background="image/jk8-12-1.png" height="30"></TH> <TH width="80" background="image/jk8-1122.png" class="sa">毛利</TH> <TH width="5" background="image/jk8-13-1.png"></TH> <TH width="4"></TH> <TH width="5" background="image/jk8-12-1.png" height="30"></TH> <TH width="80" background="image/jk8-1122.png" class="sa">銷售增長率</TH> <TH width="5" background="image/jk8-13-1.png"></TH> <TH width="4"></TH> <TH width="5" background="image/jk8-12-1.png" height="30"></TH> <TH width="80" background="image/jk8-1122.png" class="sa">月均條均價</TH> <TH width="5" background="image/jk8-13-1.png"></TH> <TH width="4"></TH> <TH width="5" background="image/jk8-12-1.png" height="30"></TH> <TH width="80" background="image/jk8-1122.png" class="sa">市場狀態(tài)</TH> <TH width="5" background="image/jk8-13-1.png"></TH> <TH width="4"></TH> <TH width="5" background="image/jk8-12-1.png" height="30"></TH> <TH width="80" background="image/jk8-1122.png" class="sa">誠信經(jīng)營</TH> <TH width="5" background="image/jk8-13-1.png"></TH> <TH width="4"></TH> <TH width="5" background="image/jk8-12-1.png" height="30"></TH> <TH width="80" background="image/jk8-1122.png" class="sa">明碼標(biāo)價</TH> <TH width="5" background="image/jk8-13-1.png"></TH> <TH width="4"></TH> <TH width="5" background="image/jk8-12-1.png" height="30"></TH> <TH width="80" background="image/jk8-1122.png" class="sa">訂貨方式</TH> <TH width="5" background="image/jk8-13-1.png"></TH> <TH width="4"></TH> <TH width="5" background="image/jk8-12-1.png" height="30"></TH> <TH width="80" background="image/jk8-1122.png" class="sa">徽映e家系統(tǒng)</TH> <TH width="5" background="image/jk8-13-1.png"></TH> <TH width="4"></TH> <TH width="5" background="image/jk8-12-1.png" height="30"></TH> <TH width="80" background="image/jk8-1122.png" class="sa">優(yōu)質(zhì)終端</TH> <TH width="24" background="image/jk8-13-1.png"></TH> </TR> </TR> </THEAD> </TABLE> </DIV>  <DIV style="WIDTH: 85px; HEIGHT: 383px;" class="tableColumn" id='MyTable_tableColumn'> <TABLE width="100%" border='0' cellSpacing='0' cellPadding='0'><TR><TD width="2" bgcolor="#d4d6cf"></TD><TD width="45" height="30"></TD></tr> </TABLE> <TABLE width="100%" border='0' cellSpacing='0' cellPadding='0'><TR><TD height="2" colspan="2" bgcolor="#d4d6cf"></TD></tr> </TABLE> <TABLE border='0' cellSpacing='0' cellPadding='0'> <TBODY> <TR align="center"> <TD width="2" bgcolor="#d4d6cf"></TD> <TD height="30" width="45"><input type='checkbox'/></TD> </TR> <TR align="center" bgcolor="#f4f2f2"> <TD width="2" bgcolor="#d4d6cf"></TD> <TD height="30" width="45"><input type='checkbox'/></TD> </TR> <TR align="center"> <TD width="2" bgcolor="#d4d6cf"></TD> <TD height="30" width="45"><input type='checkbox'/></TD> </TR> <TR align="center" bgcolor="#f4f2f2"> <TD width="2" bgcolor="#d4d6cf"></TD> <TD height="30" width="45"><input type='checkbox'/></TD> </TR> <TR align="center"> <TD width="2" bgcolor="#d4d6cf"></TD> <TD height="30" width="45"><input type='checkbox'/></TD> </TR> <TR align="center" bgcolor="#f4f2f2"> <TD width="2" bgcolor="#d4d6cf"></TD> <TD height="30" width="45"><input type='checkbox'/></TD> </TR> <TR align="center"> <TD width="2" bgcolor="#d4d6cf"></TD> <TD height="30" width="45"><input type='checkbox'/></TD> </TR> <TR align="center" bgcolor="#f4f2f2"> <TD width="2" bgcolor="#d4d6cf"></TD> <TD height="30" width="45"><input type='checkbox'/></TD> </TR> <TR align="center"> <TD width="2" bgcolor="#d4d6cf"></TD> <TD height="30" width="45"><input type='checkbox'/></TD> </TR> <TR align="center" bgcolor="#f4f2f2"> <TD width="2" bgcolor="#d4d6cf"></TD> <TD height="30" width="45"><input type='checkbox'/></TD> </TR> </TBODY> </TABLE> </DIV>  <DIV style="WIDTH: 600px; HEIGHT: 400px;" class="tableData" id='MyTable_tableData'> <DIV><TABLE style="width:2205;" border='0' cellSpacing='0' cellPadding='0'><tr><td height="2" colspan="2" bgcolor="#d4d6cf"></td></tr></TABLE> </DIV> <DIV> <TABLE style="width:2205;" id='MyTable' border='0' cellSpacing='0' cellPadding='0'> <TR align="center"> <td width="2" height="30" bgcolor="#d4d6cf"></td> <td width="45" colspan="3" height="30"> </td> <td width="4" height="30"></td> <td width="55" colspan="3" class="sa">客戶名</td> <td width="4" height="30"></td> <td width="55" colspan="3" class="sa">區(qū)域</td> <td width="4" height="30"></td> <td width="80" colspan="3" class="sa">商圈</td> <td width="4" height="30"></td> <td width="80" colspan="3" class="sa">業(yè)態(tài)</td> <td width="4" height="30"></td> <td width="80" colspan="3" class="sa">新品比例</td> <td width="4" height="30"></td> <td width="90" colspan="3" class="sa">順銷品牌比例</td> <td width="4" height="30"></td> <td width="90" colspan="3" class="sa">雙低品牌比例</td> <td width="4" height="30"></td> <td width="90" colspan="3" class="sa">責(zé)任品牌比例</td> <td width="4" height="30"></td> <td width="90" colspan="3" class="sa">階段性培育</td> <td width="4" height="30"></td> <td width="90" colspan="3" class="sa">店鋪面積</td> <td width="4" height="30"></td> <td width="90" colspan="3" class="sa">經(jīng)營卷煙面積</td> <td width="4" height="30"></td> <td width="90" colspan="3" class="sa">新品接受度</td> <td width="4" height="30"></td> <td width="90" colspan="3" class="sa">溝通行為特征</td> <td width="4" height="30"></td> <td width="90" colspan="3" class="sa">進貨量</td> <td width="4" height="30"></td> <td width="90" colspan="3" class="sa">進貨額</td> <td width="4" height="30"></td> <td width="90" colspan="3" class="sa">毛利</td> <td width="4" height="30"></td> <td width="90" colspan="3" class="sa">銷售增長率</td> <td width="4" height="30"></td> <td width="90" colspan="3" class="sa">月均條均價</td> <td width="4" height="30"></td> <td width="90" colspan="3" class="sa">市場狀態(tài)</td> <td width="4" height="30"></td> <td width="90" colspan="3" class="sa">誠信經(jīng)營</td> <td width="4" height="30"></td> <td width="90" colspan="3" class="sa">明碼標(biāo)價</td> <td width="4" height="30"></td> <td width="90" colspan="3" class="sa">訂貨方式</td> <td width="4" height="30"></td> <td width="90" colspan="3" class="sa">徽映e家系統(tǒng)</td> <td width="4" height="30"></td> <td width="90" colspan="3" class="sa">優(yōu)質(zhì)終端</td> <td width="2" height="30" ></td> </TR> <TR align="center" bgcolor="#f4f2f2"> <td width="2" height="30" bgcolor="#d4d6cf"></td> <td width="45" colspan="3" height="30"> </td> <td width="4" height="30"></td> <td width="55" colspan="3" class="sa">客戶名</td> <td width="4" height="30"></td> <td width="55" colspan="3" class="sa">區(qū)域</td> <td width="4" height="30"></td> <td width="80" colspan="3" class="sa">商圈</td> <td width="4" height="30"></td> <td width="80" colspan="3" class="sa">業(yè)態(tài)</td> <td width="4" height="30"></td> <td width="80" colspan="3" class="sa">新品比例</td> <td width="4" height="30"></td> <td width="90" colspan="3" class="sa">順銷品牌比例</td> <td width="4" height="30"></td> <td width="90" colspan="3" class="sa">雙低品牌比例</td> <td width="4" height="30"></td> <td width="90" colspan="3" class="sa">責(zé)任品牌比例</td> <td width="4" height="30"></td> <td width="90" colspan="3" class="sa">階段性培育</td> <td width="4" height="30"></td> <td width="90" colspan="3" class="sa">店鋪面積</td> <td width="4" height="30"></td> <td width="90" colspan="3" class="sa">經(jīng)營卷煙面積</td> <td width="4" height="30"></td> <td width="90" colspan="3" class="sa">新品接受度</td> <td width="4" height="30"></td> <td width="90" colspan="3" class="sa">溝通行為特征</td> <td width="4" height="30"></td> <td width="90" colspan="3" class="sa">進貨量</td> <td width="4" height="30"></td> <td width="90" colspan="3" class="sa">進貨額</td> <td width="4" height="30"></td> <td width="90" colspan="3" class="sa">毛利</td> <td width="4" height="30"></td> <td width="90" colspan="3" class="sa">銷售增長率</td> <td width="4" height="30"></td> <td width="90" colspan="3" class="sa">月均條均價</td> <td width="4" height="30"></td> <td width="90" colspan="3" class="sa">市場狀態(tài)</td> <td width="4" height="30"></td> <td width="90" colspan="3" class="sa">誠信經(jīng)營</td> <td width="4" height="30"></td> <td width="90" colspan="3" class="sa">明碼標(biāo)價</td> <td width="4" height="30"></td> <td width="90" colspan="3" class="sa">訂貨方式</td> <td width="4" height="30"></td> <td width="90" colspan="3" class="sa">徽映e家系統(tǒng)</td> <td width="4" height="30"></td> <td width="90" colspan="3" class="sa">優(yōu)質(zhì)終端</td> <td width="2" height="30"></td> </TR> </TABLE> </DIV> </DIV> </DIV> <a href="http://www.cnblogs.com/yangzhilong/p/3340130.html">轉(zhuǎn)載請注明出處:http://www.cnblogs.com/yangzhilong/p/3340130.html</a>
<a href="http://www.cnblogs.com/sorex/archive/2011/06/30/2093499.html">參考出處:http://www.cnblogs.com/sorex/archive/2011/06/30/2093499.html</a>

</BODY>

參考Bolg:http://www.cnblogs.com/sorex/archive/2011/06/30/2093499.html

轉(zhuǎn)載于:https://www.cnblogs.com/yangzhilong/p/3340130.html

總結(jié)

以上是生活随笔為你收集整理的实现锁死的有滚动条的div的表格(datagird)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇： Mvc示例代码调试之一----调试工具及
下一篇： Entity Framework 5.0