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

实现锁死的有滚动条的div的表格(datagird)的更多相关文章

  1. div滚动条时div内容显示一半

    本文为博主原创,未经允许不得转载 今天在做页面浏览器适配时,将页面中的一个div进行放大时,出现了滚动条,但滚动条对应div中的 内容只能显示一半. 仔细对应属性样式时,div具有overflow:h ...

  2. 2017.9.24 基于HTML+JavaScript+CSS的开发案例&&JavaScript+CSS+DIV实现表格变色

    1.JavaScript+CSS+DIV实现下拉菜单 1.1 层标签<div> 基本语法: <div id="层编号" style="position: ...

  3. 自定义滚动条——控制div的大小和透明度

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #2b7ec3 } p.p2 { margin: 0.0px ...

  4. 关于ie6下拖动滚动条时,div抖动的问题解决

    你如果遇到了这个问题,算是你有福了. 首先说非ie6下的div不随滚动条变化而移动位置的. 1,首先在body中写足够多的文字,一直到浏览器出现滚动条.例如你可以拼命的放P,足够多的P标签 2建立一个 ...

  5. div 加滚动条 超过div宽度 自动换行 div居中

    一.div 中加滚动条 一. <div style=" overflow:scroll; width:400px; height:400px;”></div> 记住宽 ...

  6. div写表格，原生滚动条，数据能够自动滚动

    如何让表格的滚动条能够自动滚动呢? html: <div class="tabinner5"> <div class="tab5 tab5a" ...

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

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

  8. js控制div滚动条，滚动滚动条使div中的元素可见并居中

    1.html代码如下 <div id="panel"> <div id="div1"></div> <div id=& ...

  9. jquery 让滚动条处于div底部

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. [Node.js]OS模块

    摘要 Node.js有很多工具模块,比如os,path,net,dns,domain模块.这里先介绍os模块的使用方法.os模块提供了一些基本的系统操作函数. os模块 引入os模块 var os=r ...

  2. Qt移动应用开发（三）：使用精灵图片实现帧动画

    Qt移动应用开发(三):使用精灵图片实现帧动画 上一篇博文讲到了Qt Quick对于动画的一般支持.动画的形式多样,配合不同的插值函数,能够差点儿实现全部想要的动画效果,而对于游戏的一些特殊的效果比方 ...

  3. iOS开源控件库收集

    下拉刷新 将数据保存至keyRing 简单的模板引擎,用来生成html OmniGroup 这个其实不是类库,是一个Cocoa的Recipe CocoaPods 为XCode project提供一个类 ...

  4. 【spring cloud】在spring cloud服务中，打包ms-core失败，报错Failed to execute goal org.springframework.boot:spring-boot-maven-plugin:2.0.4.RELEASE:repackage (default) on project

    在spring cloud服务中,有一个ms-code项目,只为所有的微服务提供核心依赖和工具类,没有业务意义,作为核心依赖使用.所以没有main方法,没有启动类. 在spring cloud整体打包 ...

  5. .NET：CLR via C# User-Mode Constructs

    The CLR guarantees that reads and writes to variables of the following data types are atomic: Boolea ...

  6. 追MM和Java的23种设计模式

    我在Java论坛看到这篇文章,作者以轻松的语言比喻了java的32种模式,有很好的启发作用,但可惜没有给出具体的意思,我就在后边加上了.这些都是最简单的介绍,要学习的话建议你看一下阎宏博士的<J ...

  7. vc 获得调用者的模块名称

    void ShowCallerModuleName(void* calleraddr ){ HMODULE hCallerModule = NULL; TCHAR szModuleName[MAX_P ...

  8. golang包管理工具及环境管理工具;如何下载外网的依赖包

    简介: golang的包管理工具类似于java的maven.python的pip.js的npm,可以实现依赖包的统一管理:有很多:govendor.godep.glide,挑一个自己喜欢的用吧.mac ...

  9. 【BZOJ】【2527】【POI2011】Meteors

    整体二分+树状数组 整体二分……感谢zyf提供的入门题 简单粗暴的做法:枚举每一个国家,二分他的$w_i$,然后计算……然而这样效率很低…… 整体二分就是:对所有的国家一起进行二分,$w_i$在mid ...

  10. 基于at91rm9200的i2c分析（DS1307实时时钟芯片）

    board-ek.c 构造i2c_board_info结构体 static struct i2c_board_info __initdata ek_i2c_devices[] = {     {    ...