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="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 >&nbsp;</TH>
</TR>
</THEAD>
</table>
</div>
<!-- 表头DIV,用来表头的table(这里的表比MyTable_tableColumn要宽17是用来解决下面滚动的出现导致表头和数据的table上下没对齐的问题) -->
<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">&nbsp;</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="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">&nbsp;</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">&nbsp;</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

转载于:https://www.cnblogs.com/yangzhilong/p/3340130.html

实现锁死的有滚动条的div的表格(datagird)相关推荐

  1. html div 隐藏滚动条样式,div滚动条样式隐藏与显示

    DIV滚动条样式是可以设置的,CSS滚动条同样也可以显示与隐藏,对div设置滚动条,设置其横向滚动条和纵向滚动条样式应该怎么做呢? 要设置CSS滚动条样式,需要用到overflow-y和overflo ...

  2. html中div滚动条设置,DIV滚动条属性及样式设置方式

    这里向大家描述一下DIV滚动条属性及样式设置,所谓DIV滚动条,就是利用DIV标签,在里面嵌入CSS样式表,加入overflow的属性值,这样,当div所规范的区域内的内容达到一定程序时,滚动条就派上 ...

  3. 使用div制作表格效果

    使用div制作表格效果 1 基础版展示 1.1代码 1.2HTML 1.3CSS 2进阶版展示(动态生成表格) 2.1代码 2.2HTML 2.3CSS 2.4JS 2.5完整版 1 基础版展示 点击 ...

  4. HTML学习13：div和表格布局

    文章目录 1.div布局 2.table布局 3.各优缺点 在网页中,可以使用div或表格布局,各有哪些优劣呢? 1.div布局 在网页中可以使用很多个 div,使用 div 可以将网页中的任何元素布 ...

  5. div与表格应用实例——计算器布局

    样式 代码 <!doctype html> <html lang="en"><head><meta charset="UTF-8 ...

  6. div制作表格，增减表格

    div制作表格,增减表格 <!DOCTYPE html> <html><head><meta charset="utf-8" />& ...

  7. html div转换表格,Dreamweaver页面布局：表格与Div的相互转换

    我们在Dreamweaver中使用AP Div定位网页中的内容比用表格定位网页中的内容更方便.因为AP Div可以随意移动.所以可以先用AP Div制作网页,然后再按照需要将AP Div转化为表格. ...

  8. div:给div加滚动条　div的滚动条设置

    今天做了个例子: div 的滚动条问题: 两种方法: 一. <div style=" overflow:scroll; width:400px; height:400px;" ...

  9. 转: div:给div加滚动条　div的滚动条设置

    div 的滚动条问题: 两种方法: 一. <div style=" overflow:scroll; width:400px; height:400px;"></ ...

最新文章

  1. 深入浅出开源性能测试工具 Locust (使用篇 1)
  2. linux 服务器安装字体
  3. C#中常用的经典文件操作方法
  4. WPF-MVVM学习心德（WinForm转WPF心德）
  5. 向大家推荐几本数据库入门的书
  6. SpringBoot 配置多数据源(Sql Server、MySql)
  7. linux java gc_Java GC机制及相关
  8. 深信服手机客户端_纳米手机防水镀膜靠不靠谱，电视报道后才知道有多坑。
  9. 将Java EE单体应用打造成微服务
  10. MFC控件之cimagelist，加载不上位图
  11. Android 计算网络速度文件下载剩余时间＜＜最优方案＞＞
  12. linux系统宽带测速,Linux下3种常用的网络测速工具简介
  13. lte tm模式_LTE的几种模式介绍
  14. Blender插件BoxCutter 7.1.7v15 硬表面建模2.91+教程Box Cutter
  15. 编程疑难杂症の无法剔除的神秘重复记录
  16. java-生产环境不重启 JVM，替换掉已经加载的类
  17. 客快物流大数据项目(二十四)：OGG安装部署
  18. 2000-2019 年制造业各细分行业数据库
  19. 循环码的概念以及拓展
  20. 运动设施管理系统er图

热门文章

  1. iviewui php,Vue UI框架对比：Element UI、Ant Design Vue、iView
  2. JZOJ 1016. 【PKU3321】苹果树
  3. php根据单词截取英文语句,php按单词截取字符串的方法_PHP教程
  4. dji大疆机器人冬令营_2019RoboMaster高中生机器人冬令营火热进行中
  5. 用python排教室_开学季，教你用Python画大学教室座位神分区图！网友直呼“中枪”...
  6. java mysql 线程安全_java连接mysql的线程安全问题
  7. python元胞自动机模拟交通_大师兄带你复现 -gt; 难度超高的二维CA元胞自动机模型...
  8. 使用C/C++解析json文件
  9. python函数调用键盘热键_神技能：Python控制键盘鼠标
  10. python温度转换程序_用Python程序温度转换实例