高难度数据表格问题，解决后可付报酬！！！

如图：*说明：左上角数字6为当前显示数据的月份。下方为各天的数据，大写的数字为星期几，小写的为日期。数据表显示一年365天的数据。想利用JS实现如下效果：
1.数据表头固定，数据表可用鼠标中键滚动（右侧不用滚动条），当滚动到对应月份时，左上角数字改变。
2.默认打开页面时，当天数据垂直居中（当天记录显示在最中间）。
3.点击左上角月份，弹出下拉层进行选择其它月份数据。
找了好几个Juery的插件，都没办法实现。哪位高手能否帮忙解决一下，或者有相关的示例参考。解决后可付一定的报酬！！谢谢！！

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

数据滚动条的的效果用JQuery的jscroll.js插件实现了，但现在还有个问题就是无法让滚动条准确定位到当天的那一条记录。以下是我的代码：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=7" />
<title>test</title>
<link href="images/style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="scripts/jquery-1.6.js"></script>
<script type="text/javascript" src="scripts/jscroll.js"></script>
<script>
$(document).ready(function(){
$("#ee").jscroll({W:"8px",Btn:{btn:false}});
//$("#today").focus();
//var topL=$("#today").offset().top;
//$("#ee").scrollTop(topL);

$("#ee").animate({scorllTop:$("#today").offset().top},1000);//定位到指定位置，这个地方不知道怎么写
});
</script>
<head>
<body>
<table id="yourTableID" width="100%" border="0" cellspacing="0" cellpadding="0">
<thead>
  <tr>
    <th width="12" nowrap class="TableHead">6</th>
    <th width="10" nowrap class="TableHead"><img src="images/arrow3.gif" width="7" height="7"></th>
    <th width="60" nowrap class="TableHead">SUSALA</th>
    <th width="60" nowrap class="TableHead"> </th>
    <th width="60" nowrap class="TableHead"> </th>
    <th width="60" nowrap class="TableHead"> </th>
    <th width="60" nowrap class="TableHead"> </th>
    <th nowrap class="TableHead"> </th>
    <th width="8" nowrap class="TableHead"><img src="images/arrow2.gif" width="7" height="6"></th>
    <th width="10" nowrap class="TableHead"><img src="images/arrow1.gif" width="7" height="6"></th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td colspan="10">
    <div id="ee">
    <table width="100%" border="0" cellpadding="0" cellspacing="0" class="Table1px">
      <tr>
        <td width="25" rowspan="5" align="center" valign="top">一<br>
          21</td>
        <td> </td>
        <td> </td>
        <td> </td>
        <td> </td>
      </tr>
      <tr>
        <td> </td>
        <td> </td>
        <td> </td>
        <td> </td>
      </tr>
      <tr>
        <td> </td>
        <td> </td>
        <td> </td>
        <td> </td>
      </tr>
      <tr>
        <td> </td>
        <td> </td>
        <td> </td>
        <td> </td>
      </tr>
      <tr>
        <td> </td>
        <td> </td>
        <td> </td>
        <td> </td>
      </tr>
    </table>
    <table width="100%" border="0" cellpadding="0" cellspacing="0" class="Table1px">
      <tr>
        <td width="25" rowspan="5" align="center" valign="top">二<br>
          22</td>
        <td> </td>
        <td> </td>
        <td> </td>
        <td> </td>
      </tr>
      <tr>
        <td> </td>
        <td> </td>
        <td> </td>
        <td> </td>
      </tr>
      <tr>
        <td> </td>
        <td> </td>
        <td> </td>
        <td> </td>
      </tr>
      <tr>
        <td> </td>
        <td> </td>
        <td> </td>
        <td> </td>
      </tr>
      <tr>
        <td> </td>
        <td> </td>
        <td> </td>
        <td> </td>
      </tr>
    </table>
    <table width="100%" border="0" cellpadding="0" cellspacing="0" class="Table1px">
      <tr>
        <td width="25" rowspan="5" align="center" valign="top">三<br>
          23</td>
        <td></td>
        <td> </td>
        <td> </td>
        <td> </td>
      </tr>
      <tr>
        <td> </td>
        <td> </td>
        <td> </td>
        <td> </td>
      </tr>
      <tr>
        <td> </td>
        <td> </td>
        <td> </td>
        <td> </td>
      </tr>
      <tr>
        <td> </td>
        <td> </td>
        <td> </td>
        <td> </td>
      </tr>
      <tr>
        <td> </td>
        <td> </td>
        <td> </td>
        <td> </td>
      </tr>
    </table>
    <table width="100%" border="0" cellpadding="0" cellspacing="0" class="Table1px">
      <tr>
        <td width="25" rowspan="5" align="center" valign="top">四<br>
          24</td>
        <td> </td>
        <td> </td>
        <td> </td>
        <td> </td>
      </tr>
      <tr>
        <td> </td>
        <td> </td>
        <td> </td>
        <td> </td>
      </tr>
      <tr>
        <td> </td>
        <td> </td>
        <td> </td>
        <td> </td>
      </tr>
      <tr>
        <td> </td>
        <td> </td>
        <td> </td>
        <td> </td>
      </tr>
      <tr>
        <td> </td>
        <td> </td>
        <td> </td>
        <td> </td>
      </tr>
    </table>
    <table width="100%" border="0" cellpadding="0" cellspacing="0" class="Table1px">
      <tr>
        <td width="25" rowspan="5" align="center" valign="top">五<br>
          25</td>
        <td><input type="input" id="today"></td>
        <td> </td>
        <td> </td>
        <td> </td>
      </tr>
      <tr>
        <td> </td>
        <td> </td>
        <td> </td>
        <td> </td>
      </tr>
      <tr>
        <td> </td>
        <td> </td>
        <td> </td>
        <td> </td>
      </tr>
      <tr>
        <td> </td>
        <td> </td>
        <td> </td>
        <td> </td>
      </tr>
      <tr>
        <td> </td>
        <td> </td>
        <td> </td>
        <td> </td>
      </tr>
    </table>
    <table width="100%" border="0" cellpadding="0" cellspacing="0" class="Table1px">
      <tr>
        <td width="25" rowspan="5" align="center" valign="top">六<br>
          26</td>
        <td> </td>
        <td> </td>
        <td> </td>
        <td> </td>
      </tr>
      <tr>
        <td> </td>
        <td> </td>
        <td> </td>
        <td> </td>
      </tr>
      <tr>
        <td> </td>
        <td> </td>
        <td> </td>
        <td> </td>
      </tr>
      <tr>
        <td> </td>
        <td> </td>
        <td> </td>
        <td> </td>
      </tr>
      <tr>
        <td> </td>
        <td> </td>
        <td> </td>
        <td> </td>
      </tr>
    </table>
    <table width="100%" border="0" cellpadding="0" cellspacing="0" class="Table1px">
      <tr>
        <td width="25" rowspan="5" align="center" valign="top">日<br>
          27</td>
        <td> </td>
        <td> </td>
        <td> </td>
        <td> </td>
      </tr>
      <tr>
        <td> </td>
        <td> </td>
        <td> </td>
        <td> </td>
      </tr>
      <tr>
        <td> </td>
        <td> </td>
        <td> </td>
        <td> </td>
      </tr>
      <tr>
        <td> </td>
        <td> </td>
        <td> </td>
        <td> </td>
      </tr>
      <tr>
        <td> </td>
        <td> </td>
        <td> </td>
        <td> </td>
      </tr>
    </table>
    </div>
    </td>
  </tr>
  </tbody>
</table></body>
</html>
$("#ee").animate({scorllTop:$("#today").offset().top},1000);//定位到指定位置这个不知道怎么改，查了很多资料都是相对body的滚动条定位。
jscroll.js下载地址：http://app.soche8.com/show/jscoll/
你准备给我好多钱呢？？？？呵呵呵呵哈哈哈哈 hohohoh~~~<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
body,td{font-size:12px;}
.title{width:300px; line-height:30px; background:#ccc}
.title a{padding:0px 10px;font-size:14px; text-decoration:none; color:#fff;}
.box{width:300px; height:201px; overflow:hidden;}
.table{width:300px; border-collapse:collapse; border-spacing:0; }
.table td{border:1px solid #ccc;text-align:center; height:40px; overflow:hidden;padding:0px;width:20%}
.month_list{position:absolute; display:none; width:30px;border:1px solid #ccc;background:#fff;text-align:center;}
.month_list a:hover{background:#f60;padding:0px 5px;}
</style>
</head>
<body>
<div class="title"><a id="JS_title" href="javascript:;" onclick="D.changeMonth();">-</a></div>
<div class="month_list" id="JS_month_list">
<a href="javascript:;" onclick="D.scrollTo(D.year,0,1)">1</a><br />
<a href="javascript:;" onclick="D.scrollTo(D.year,1,1)">2</a><br />
<a href="javascript:;" onclick="D.scrollTo(D.year,2,1)">3</a><br />
<a href="javascript:;" onclick="D.scrollTo(D.year,3,1)">4</a><br />
<a href="javascript:;" onclick="D.scrollTo(D.year,4,1)">5</a><br />
<a href="javascript:;" onclick="D.scrollTo(D.year,5,1)">6</a><br />
<a href="javascript:;" onclick="D.scrollTo(D.year,6,1)">7</a><br />
<a href="javascript:;" onclick="D.scrollTo(D.year,7,1)">8</a><br />
<a href="javascript:;" onclick="D.scrollTo(D.year,8,1)">9</a><br />
<a href="javascript:;" onclick="D.scrollTo(D.year,9,1)">10</a><br />
<a href="javascript:;" onclick="D.scrollTo(D.year,10,1)">11</a><br />
<a href="javascript:;" onclick="D.scrollTo(D.year,11,1)">12</a><br />
</div>
<div class="box" id = "JS_box"></div>
<script>
var D={};
D.dayList=[];
D.now = new Date();
D.year = D.now.getFullYear()
D.first = new Date( D.year,0,1 )
D.changeMonth = function(){
D.$("JS_month_list").style.display="block";
}
D.$=function(id){return document.getElementById(id);}
D.setDayList = function(){
var y = D.year;
for(var i = 0; i<366 ; i ++){
var tmp =new Date( y,0,1+i );
if( i==365 && tmp.getFullYear()!=y )break ;
D.dayList[i] = tmp ;
}
//console.log(D.dayList);
}
D.drawTable = function(){
var h= '<table class="table" id="JS_table">';
var l = D.dayList.length;
for(var i = 0;i<l;i++){
var d = D.dayList[i];
h+='<tr><td>'+ '日一二三四五六'.substr(d.getDay(),1) +'<br />'+d.getDate()+'</td><td>'+d.getFullYear()+'</td><td>'+(d.getMonth()+1)+'</td><td>Hello</td><td>World</td></tr>'
}
h +='</table>';
D.$("JS_box").innerHTML = h;
}
D.wheelHandle = function (e) {
var detail = e.wheelDelta || e.detail
    detail = 0-detail/Math.abs(detail);
var scrollToDate = new Date( D.scrollDate.getFullYear(), D.scrollDate.getMonth(),D.scrollDate.getDate()+detail )
D.scrollTo ( scrollToDate.getFullYear(),scrollToDate.getMonth(),scrollToDate.getDate() )
}
D.scrollTo = function(y,m,d){
var date = new Date(y,m,d);
var c = date.getTime() - D.first.getTime();
c = c / ( 60 *60 *24 * 1000 ) - 2;
if(c > 361 * 60 *60 *24 * 1000 )c = 361 * 60 *60 *24 * 1000 ;
if(c<=0)c=0;
D.table.style.marginTop = (0 - c*40)+"px";
D.$("JS_title").innerHTML = m + 1;
D.scrollDate = date;
D.$("JS_month_list").style.display="none";
}
D.init = function(){
D.setDayList();
D.drawTable();
addScrollListener(D.$("JS_box"), D.wheelHandle);
D.table = D.$("JS_table");
D.scrollTo(2011,1,1)
}
D.init();/**
* 注册滚轮事件函数
* @param element     : 注册的事件对象
* @param wheelHandle : 注册事件函数
*/
function addScrollListener(element, wheelHandle) {
    if(typeof element != 'object') return;
    if(typeof wheelHandle != 'function') return;
    // 监测浏览器
    if(typeof arguments.callee.browser == 'undefined') {
        var user = navigator.userAgent;
        var b = {};
        b.opera = user.indexOf("Opera") > -1 && typeof window.opera == "object";
        b.khtml = (user.indexOf("KHTML") > -1 || user.indexOf("AppleWebKit") > -1 || user.indexOf("Konqueror") > -1) && !b.opera;
        b.ie = user.indexOf("MSIE") > -1 && !b.opera;
        b.gecko = user.indexOf("Gecko") > -1 && !b.khtml;
        arguments.callee.browser = b;
    }
    if(element == window)
        element = document;
    if(arguments.callee.browser.ie)
        element.attachEvent('onmousewheel', wheelHandle);
    else
        element.addEventListener(arguments.callee.browser.gecko ? 'DOMMouseScroll' : 'mousewheel', wheelHandle, false);
}
</script>
</body>
</html>
激动了。忘记改了把D.scrollTo(2011,1,1)改成D.scrollTo(D.year,D.now.getMonth(),D.now.getDate())
哥们，太感谢你了。如果有兴趣我把这个项目的JS交给你来开发，要不你开个价给我。可以和我QQ联系。
又突然发现至少有两处可以优化的地方：
1.setList 和 drawTable 可以合并到一个循环里
2.不需要为每一天创建日期实例
哥们，这个小项目真的很需要你这样的JS高手，你看能否帮下忙，我把JS部分包给你来做。对了，这个数据表是要可直接修改的，类似editTable插件功能。所以我想整个页面都用JQuery和插件来实现，可能扩散性强一些。如果可以，请加下我的QQ：１２６４６４４１