层的移动,使用了jquery

直接上代码.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Sales Information System</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
body { 
    margin: 0px 0px 0px 2px;
    padding: 0;
    text-align:left;
    width:100%;
    height:100%;
}
.report 
{
    margin:0;
    padding:0;
    border-collapse:collapse;
    width:1033px;
}
.report .bodyen 
{
    margin:0;
    padding:0;
    font-family: "Trebuchet MS";
    font-size: 11px;
    font-weight: normal;
    color: #000000;
    line-height: 25px;
    text-align: left;
    background-color:#FFFFFF;
}
.report .header {
    font-family: "Trebuchet MS";
    font-size: 11px;
    font-weight: bold;
    color: #FFFFFF;
    line-height: 25px;
    text-align: center;
    background-color: #32659C;
}
.report .bodyodd 
{
    margin:0;
    padding:0;
    font-family: "Trebuchet MS";
    font-size: 11px;
    font-weight: normal;
    color: #000000;
    line-height: 25px;
    text-align: center;
    background-color:#FFFFFF;
}
</style>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.dimensions.js" type="text/javascript"></script>
<script language="javascript">
$(document).ready(function(){
    $("#divContent").scroll(function(){
       document.getElementById("tabHead").scrollLeft=$("#divContent").scrollLeft();
       document.getElementById("tabLeft").scrollTop=$("#divContent").scrollTop();
    });
}); 
</script>
</head>

<body>
<table class="report" cellspacing="0" cellpadding="0" border="0">
    <tr>
        <td>
            <div id="tabFixed" style="padding-right: 0px; padding-left: 0px;padding-bottom: 0px; overflow: hidden; width: 80px; padding-top: 0px; height: 53px">
                <table class="header" style="border-collapse: collapse" bordercolor="#cccccc" height="53" width="160" border="1">
                    <tr>
                        <td width="80">TYPE</td>
                    </tr>
                </table>
            </div>
        </td>
        <td class="bodyen">
            <div id="tabHead" style="padding-right: 0px; padding-left: 0px;left: 0px; padding-bottom: 0px; overflow: hidden; width: 953px; padding-top: 0px;top: 0px; height: 53px">
                <table class="header" style="border-collapse: collapse" bordercolor="#cccccc" width="1200" border="1">
                    <tr>
                        <td width="300" colspan="3" height="25">2003</td>
                        <td width="300" colspan="3" height="25">2004</td>
                        <td width="300" colspan="3" height="25">2008</td>
                        <td width="300" colspan="3" height="25">Total</td>
                    </tr>
                    <tr>
                        <td width="100" height="25">Warranty</td>
                        <td width="100" height="25">Warranty L1</td>
                        <td width="100" height="25">Warranty L2</td>
                        <td width="100" height="25">Warranty</td>
                        <td width="100" height="25">Warranty L1</td>
                        <td width="100" height="25">Warranty L2</td>
                        <td width="100" height="25">Warranty</td>
                        <td width="100" height="25">Warranty L1</td>
                        <td width="100" height="25">Warranty L2</td>
                        <td width="100" height="25">Warranty</td>
                        <td width="100" height="25">Warranty L1</td>
                        <td width="100" height="25">Warranty L2</td>
                    </tr>
                </table>
            </div>
        </td>
    </tr>
    <tr>
        <td valign="top">
            <div id="tabLeft" style="padding-bottom: 1px; overflow: hidden;width: 80px; height: 392px">
                <table class="bodyodd" style="border-collapse: collapse" bordercolor="#cccccc" width="80" border="1">
                    <tr>
                        <td width="80">TYPE1</td>
                    </tr>
                    <tr>
                        <td width="80">TYPE2</td>
                    </tr>
                    <tr>
                        <td width="80">TYPE3</td>
                    </tr>
                    <tr>
                        <td width="80">TYPE4</td>
                    </tr>
                    <tr>
                        <td width="80">TYPE5</td>
                    </tr>
                    <tr>
                        <td width="80">TYPE6</td>
                    </tr>
                    <tr>
                        <td width="80">TYPE7</td>
                    </tr>
                    <tr>
                        <td width="80">TYPE8</td>
                    </tr>
                    <tr>
                        <td width="80">TYPE9</td>
                    </tr>
                    <tr>
                        <td width="80">TYPE10</td>
                    </tr>
                    <tr>
                        <td width="80">TYPE11</td>
                    </tr>
                    <tr>
                        <td width="80">TYPE12</td>
                    </tr>
                    <tr>
                        <td width="80">TYPE13</td>
                    </tr>
                    <tr>
                        <td width="80">TYPE14</td>
                    </tr>
                    <tr>
                        <td width="80">Total</td>
                    </tr>
                </table>
            </div>
        </td>
        <td class="bodyen">
            <div id="divContent" style="padding-right: 0px; padding-left: 0px;left: 0px; padding-bottom: 0px; overflow: scroll; width: 970px; padding-top: 0px;top: 0px; height: 410px">
                <table class="bodyodd" style="border-collapse: collapse" bordercolor="#cccccc" width="1200" border="1">
                    <tr>
                        <td width="97" height="25">147,160,722.08</td>
                        <td width="97" height="25">0.00</td>
                        <td width="97" height="25">0.00</td>
                        <td width="97" height="25">27,441,314.94</td>
                        <td width="97" height="25">0.00</td>
                        <td width="97" height="25">0.00</td>
                        <td width="97" height="25">19,295,742.15</td>
                        <td width="97" height="25">0.00</td>
                        <td width="97" height="25">0.00</td>
                        <td width="97" height="25">193,897,779.17</td>
                        <td width="97" height="25">0.00</td>
                        <td width="97" height="25">0.00</td>
                    </tr>
                    <tr>
                        <td width="97" height="25">147,160,722.08</td>
                        <td width="97" height="25">0.00</td>
                        <td width="97" height="25">0.00</td>
                        <td width="97" height="25">27,441,314.94</td>
                        <td width="97" height="25">0.00</td>
                        <td width="97" height="25">0.00</td>
                        <td width="97" height="25">19,295,742.15</td>
                        <td width="97" height="25">0.00</td>
                        <td width="97" height="25">0.00</td>
                        <td width="97" height="25">193,897,779.17</td>
                        <td width="97" height="25">0.00</td>
                        <td width="97" height="25">0.00</td>
                    </tr>
                    <tr>
                        <td width="97" height="25">&nbsp;</td>
                        <td width="97" height="25">&nbsp;</td>
                        <td width="97" height="25">&nbsp;</td>
                        <td width="97" height="25">&nbsp;</td>
                        <td width="97" height="25">&nbsp;</td>
                        <td width="97" height="25">&nbsp;</td>
                        <td width="97" height="25">40,066.00</td>
                        <td width="97" height="25">0.00</td>
                        <td width="97" height="25">0.00</td>
                        <td width="97" height="25">40,066.00</td>
                        <td width="97" height="25">0.00</td>
                        <td width="97" height="25">0.00</td>
                    </tr>
                    <tr>
                        <td width="97" height="25">&nbsp;</td>
                        <td width="97" height="25">&nbsp;</td>
                        <td width="97" height="25">&nbsp;</td>
                        <td width="97" height="25">&nbsp;</td>
                        <td width="97" height="25">&nbsp;</td>
                        <td width="97" height="25">&nbsp;</td>
                        <td width="97" height="25">40,066.00</td>
                        <td width="97" height="25">0.00</td>
                        <td width="97" height="25">0.00</td>
                        <td width="97" height="25">40,066.00</td>
                        <td width="97" height="25">0.00</td>
                        <td width="97" height="25">0.00</td>
                    </tr>
                    <tr>
                        <td width="97" height="25">57,947,392.97</td>
                        <td width="97" height="25">0.00</td>
                        <td width="97" height="25">0.00</td>
                        <td width="97" height="25">12,293,564.92</td>
                        <td width="97" height="25">0.00</td>
                        <td width="97" height="25">0.00</td>
                        <td width="97" height="25">14,801,770.09</td>
                        <td width="97" height="25">0.00</td>
                        <td width="97" height="25">0.00</td>
                        <td width="97" height="25">85,042,727.98</td>
                        <td width="97" height="25">0.00</td>
                        <td width="97" height="25">0.00</td>
                    </tr>
                    <tr>
                        <td width="97" height="25">57,947,392.97</td>
                        <td width="97" height="25">0.00</td>
                        <td width="97" height="25">0.00</td>
                        <td width="97" height="25">12,293,564.92</td>
                        <td width="97" height="25">0.00</td>
                        <td width="97" height="25">0.00</td>
                        <td width="97" height="25">14,801,770.09</td>
                        <td width="97" height="25">0.00</td>
                        <td width="97" height="25">0.00</td>
                        <td width="97" height="25">85,042,727.98</td>
                        <td width="97" height="25">0.00</td>
                        <td width="97" height="25">0.00</td>
                    </tr>
                    <tr>
                        <td width="97" height="25">5,058,997.78</td>
                        <td width="97" height="25">0.00</td>
                        <td width="97" height="25">0.00</td>
                        <td width="97" height="25">2,116,912.72</td>
                        <td width="97" height="25">0.00</td>
                        <td width="97" height="25">0.00</td>
                        <td width="97" height="25">6,992,702.02</td>
                        <td width="97" height="25">0.00</td>
                        <td width="97" height="25">0.00</td>
                        <td width="97" height="25">14,168,612.52</td>
                        <td width="97" height="25">0.00</td>
                        <td width="97" height="25">0.00</td>
                    </tr>
                    <tr>
                        <td width="97" height="25">&nbsp;</td>
                        <td width="97" height="25">&nbsp;</td>
                        <td width="97" height="25">&nbsp;</td>
                        <td width="97" height="25">&nbsp;</td>
                        <td width="97" height="25">&nbsp;</td>
                        <td width="97" height="25">&nbsp;</td>
                        <td width="97" height="25">2,932,613.10</td>
                        <td width="97" height="25">0.00</td>
                        <td width="97" height="25">0.00</td>
                        <td width="97" height="25">2,932,613.10</td>
                        <td width="97" height="25">0.00</td>
                        <td width="97" height="25">0.00</td>
                    </tr>
                    <tr>
                        <td width="97" height="25">21,796,496.46</td>
                        <td width="97" height="25">0.00</td>
                        <td width="97" height="25">0.00</td>
                        <td width="97" height="25">2,195,632.03</td>
                        <td width="97" height="25">0.00</td>
                        <td width="97" height="25">0.00</td>
                        <td width="97" height="25">3,546,106.06</td>
                        <td width="97" height="25">0.00</td>
                        <td width="97" height="25">0.00</td>
                        <td width="97" height="25">27,538,234.55</td>
                        <td width="97" height="25">0.00</td>
                        <td width="97" height="25">0.00</td>
                    </tr>
                    <tr>
                        <td width="97" height="25">26,855,494.24</td>
                        <td width="97" height="25">0.00</td>
                        <td width="97" height="25">0.00</td>
                        <td width="97" height="25">4,312,544.75</td>
                        <td width="97" height="25">0.00</td>
                        <td width="97" height="25">0.00</td>
                        <td width="97" height="25">13,471,421.19</td>
                        <td width="97" height="25">0.00</td>
                        <td width="97" height="25">0.00</td>
                        <td width="97" height="25">44,639,460.18</td>
                        <td width="97" height="25">0.00</td>
                        <td width="97" height="25">0.00</td>
                    </tr>
                    <tr>
                        <td width="97" height="25">&nbsp;</td>
                        <td width="97" height="25">&nbsp;</td>
                        <td width="97" height="25">&nbsp;</td>
                        <td width="97" height="25">&nbsp;</td>
                        <td width="97" height="25">&nbsp;</td>
                        <td width="97" height="25">&nbsp;</td>
                        <td width="97" height="25">5,026,771.02</td>
                        <td width="97" height="25">0.00</td>
                        <td width="97" height="25">0.00</td>
                        <td width="97" height="25">5,026,771.02</td>
                        <td width="97" height="25">0.00</td>
                        <td width="97" height="25">0.00</td>
                    </tr>
                    <tr>
                        <td width="97" height="25">&nbsp;</td>
                        <td width="97" height="25">&nbsp;</td>
                        <td width="97" height="25">&nbsp;</td>
                        <td width="97" height="25">&nbsp;</td>
                        <td width="97" height="25">&nbsp;</td>
                        <td width="97" height="25">&nbsp;</td>
                        <td width="97" height="25">5,026,771.02</td>
                        <td width="97" height="25">0.00</td>
                        <td width="97" height="25">0.00</td>
                        <td width="97" height="25">5,026,771.02</td>
                        <td width="97" height="25">0.00</td>
                        <td width="97" height="25">0.00</td>
                    </tr>
                    <tr>
                        <td width="97" height="25">3,694,947.79</td>
                        <td width="97" height="25">0.00</td>
                        <td width="97" height="25">0.00</td>
                        <td width="97" height="25">121,370.39</td>
                        <td width="97" height="25">0.00</td>
                        <td width="97" height="25">0.00</td>
                        <td width="97" height="25">734,502.00</td>
                        <td width="97" height="25">0.00</td>
                        <td width="97" height="25">0.00</td>
                        <td width="97" height="25">4,550,820.18</td>
                        <td width="97" height="25">0.00</td>
                        <td width="97" height="25">0.00</td>
                    </tr>
                    <tr>
                        <td width="97" height="25">3,694,947.79</td>
                        <td width="97" height="25">0.00</td>
                        <td width="97" height="25">0.00</td>
                        <td width="97" height="25">121,370.39</td>
                        <td width="97" height="25">0.00</td>
                        <td width="97" height="25">0.00</td>
                        <td width="97" height="25">734,502.00</td>
                        <td width="97" height="25">0.00</td>
                        <td width="97" height="25">0.00</td>
                        <td width="97" height="25">4,550,820.18</td>
                        <td width="97" height="25">0.00</td>
                        <td width="97" height="25">0.00</td>
                    </tr>
                    <tr>
                        <td width="97" height="25">235,658,557.07</td>
                        <td width="97" height="25">0.00</td>
                        <td width="97" height="25">0.00</td>
                        <td width="97" height="25">44,168,795.00</td>
                        <td width="97" height="25">0.00</td>
                        <td width="97" height="25">0.00</td>
                        <td width="97" height="25">53,370,272.45</td>
                        <td width="97" height="25">0.00</td>
                        <td width="97" height="25">0.00</td>
                        <td width="97" height="25">333,197,624.53</td>
                        <td width="97" height="25">0.00</td>
                        <td width="97" height="25">0.00</td>
                    </tr>
                </table>
            </div>
        </td>
    </tr>
</table>
</body>
</html>

源代码下载
posted @ 2008-02-20 11:22  江湖工夫  阅读(3285)  评论(1)  编辑  收藏  举报