JS框架使用Jquery
最终效果：
代码结构：
代码：
<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的要比宽度应该要比_tableData里的table的宽度多17(在_tableHead的最后一列上),这样可达到上下表格包括滚动条上下完全对齐的效果 参数： TableID：table的ID FixColumnNumber:锁定的列的个数 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,用来限制总体datagird的宽度和高度使用 --> <DIV style="OVERFLOW: hidden" id='MyTable_tableLayout'> <!-- 左右列锁DIV,用来放列锁的列(没列锁的不需要在这里写) --> <DIV style="WIDTH: 85px; HEIGHT: 20px;" class="tableFix" id='MyTable_tableFix'> <TABLE style="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,用来表头的table(这里的表比MyTable_tableColumn要宽17是用来解决下面滚动的出现导致表头和数据的table上下没对齐的问题) --> <DIV style="WIDTH: 583px; HEIGHT: 20px;" class="tableHead" id='MyTable_tableHead'> <TABLE style="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">区域</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">业态</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">责任品牌比例</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">毛利</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">徽映e家系统</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="24" background="image/jk8-13-1.png"></TH> </TR> </TR> </THEAD> </TABLE> </DIV> <!-- 上下列锁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,跟普通的table没区别 --> <DIV style="WIDTH: 600px; HEIGHT: 400px;" class="tableData" id='MyTable_tableData'> <DIV> <TABLE style="2205;" border='0' cellSpacing='0' cellPadding='0'> <tr><td height="2" colspan="2" bgcolor="#d4d6cf"></td></tr> </TABLE> </DIV> <DIV> <TABLE style="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">区域</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">业态</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">责任品牌比例</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">毛利</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">徽映e家系统</td> <td width="4" height="30"></td> <td width="90" colspan="3" class="sa">优质终端</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">区域</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">业态</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">责任品牌比例</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">毛利</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">徽映e家系统</td> <td width="4" height="30"></td> <td width="90" colspan="3" class="sa">优质终端</td> <td width="2" height="30"></td> </TR> </TABLE> </DIV> </DIV> </DIV> <a href="http://www.cnblogs.com/yangzhilong/p/3340130.html">转载请注明出处: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