给表格的TBody加上滚动条

　　在表格中，不需要分页但需要滚动TBody的场合蛮多的，以前做过一个通过两个表格来实现：用JQuery实现Fix表头表格 ，今天突然想到，可以单独做一个滚动条，让滚动条的位置变化时，只显示TBody中指定范围的TR来实现滚动，便有了下面的实现，可以在IE/FF下运行，在滚动条上滚动鼠标轮时可以实现TBody滚动。这是一个思路，希望能抛砖引玉。

　　先看下效果图：

　　代码实现：（马上就不能上网了，注释可以没有呀）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
    <title>Untitled</title>

    <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
    <script type="text/javascript">
    $(function(){
        var table = $('table.scrolltable').each(function(){
            var $table = $(this).css('border-collapse','collapse');
            var $tbody = $table.find('tbody').eq(0);
            var sbPosition = {left: $tbody.position().left + $tbody.outerWidth(), top: $tbody.position().top };
            
            var $scrollbar = $('<div class="scrollbar"/>').css({'position':'absolute', 'overflow-y':'auto',left:sbPosition.left, top:sbPosition.top, height:'0px',width:'20px'})
                .append($('<div/>'))
                .appendTo($table.parent());
                
                
            $table.bind('rownum',function(event, newRowNum){
                //先设置显示的行
                var nFirst = parseInt($tbody.attr('itemIndex') || '0');
                $tbody.find('tr').hide();
                $tbody.find('tr').each(function(i){
                    if( i >= nFirst && i < nFirst + newRowNum)
                    {
                        $(this).show();
                    }
                    else
                    {
                        $(this).hide();
                    }
                });
                
                var scrollHeight =  $tbody.find('tr').length  * $tbody.height() / newRowNum;
                var $sb = $scrollbar;
                $sb.css('height',$tbody.height());
                $sb.find('div').eq(0).css('height',scrollHeight);
            });
            
            $scrollbar.scroll(function(){
                $sb = $(this);
                
                var nNewIndex = Math.floor($sb.scrollTop() / $sb.attr('scrollHeight') * $tbody.find('tr').length);
                var nIndex = parseInt($tbody.attr('itemIndex') || '0');
                var rownum = parseInt($table.attr('rownum') || '10');
                if(nIndex != nNewIndex)
                {
                    $tbody.find('tr').each(function(i){
                        if(i >= nNewIndex && i < nNewIndex + rownum)
                        {
                            $(this).show();
                        }
                        else
                        {
                            $(this).hide();
                        }
                    });
                    $tbody.attr('itemIndex', nNewIndex); 
                }
                
                
            });
            
            $table.trigger('rownum',parseInt($table.attr('rownum')));
        });
    });
        
        
    </script>
    <style type="text/css">
        .scrollbar
        {
            border:solid 1px red;
        }
        .scrolltable
        {
        }
    </style>
</head>

<body>
    <table class="scrolltable" border="1" rownum="10">
    <thead>
        <tr>
            <th>aaa</th>
            <th>bbb</th>
            <th>ccc</th>
            <th>ddd</th>
            <th>eee</th>
            <th>fff</th>
            
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>111</td>
            <td>111</td>
            <td>111</td>
            <td>111</td>
            <td>111</td>
            <td>111</td>
            
        </tr>
        <tr>
            <td>222</td>
            <td>222</td>
            <td>222</td>
            <td>222</td>
            <td>222</td>
            <td>222</td>
            
        </tr>
        <tr>
            <td>333</td>
            <td>333</td>
            <td>333</td>
            <td>333</td>
            <td>333</td>
            <td>333</td>
            
        </tr>
        <tr>
            <td>444</td>
            <td>444</td>
            <td>444</td>
            <td>444</td>
            <td>444</td>
            <td>444</td>
            
        </tr>
        <tr>
            <td>555</td>
            <td>555</td>
            <td>555</td>
            <td>555</td>
            <td>555</td>
            <td>555</td>
            
        </tr>
        <tr>
            <td>444</td>
            <td>444</td>
            <td>444</td>
            <td>444</td>
            <td>444</td>
            <td>444</td>
            
        </tr>
        <tr>
            <td>111</td>
            <td>111</td>
            <td>111</td>
            <td>111</td>
            <td>111</td>
            <td>111</td>
            
        </tr>
        <tr>
            <td>222</td>
            <td>222</td>
            <td>222</td>
            <td>222</td>
            <td>222</td>
            <td>222</td>
            
        </tr>
        <tr>
            <td>333</td>
            <td>333</td>
            <td>333</td>
            <td>333</td>
            <td>333</td>
            <td>333</td>
            
        </tr>
        <tr>
            <td>444</td>
            <td>444</td>
            <td>444</td>
            <td>444</td>
            <td>444</td>
            <td>444</td>
            
        </tr>
        <tr>
            <td>555</td>
            <td>555</td>
            <td>555</td>
            <td>555</td>
            <td>555</td>
            <td>555</td>
            
        </tr>
        <tr>
            <td>444</td>
            <td>444</td>
            <td>444</td>
            <td>444</td>
            <td>444</td>
            <td>444</td>
            
        </tr>
        <tr>
            <td>111</td>
            <td>111</td>
            <td>111</td>
            <td>111</td>
            <td>111</td>
            <td>111</td>
            
        </tr>
        <tr>
            <td>222</td>
            <td>222</td>
            <td>222</td>
            <td>222</td>
            <td>222</td>
            <td>222</td>
            
        </tr>
        <tr>
            <td>333</td>
            <td>333</td>
            <td>333</td>
            <td>333</td>
            <td>333</td>
            <td>333</td>
            
        </tr>
        <tr>
            <td>444</td>
            <td>444</td>
            <td>444</td>
            <td>444</td>
            <td>444</td>
            <td>444</td>
            
        </tr>
        <tr>
            <td>555</td>
            <td>555</td>
            <td>555</td>
            <td>555</td>
            <td>555</td>
            <td>555</td>
            
        </tr>
        <tr>
            <td>444</td>
            <td>444</td>
            <td>444</td>
            <td>444</td>
            <td>444</td>
            <td>444</td>
            
        </tr>
        <tr>
            <td>111</td>
            <td>111</td>
            <td>111</td>
            <td>111</td>
            <td>111</td>
            <td>111</td>
            
        </tr>
        <tr>
            <td>222</td>
            <td>222</td>
            <td>222</td>
            <td>222</td>
            <td>222</td>
            <td>222</td>
            
        </tr>
        <tr>
            <td>333</td>
            <td>333</td>
            <td>333</td>
            <td>333</td>
            <td>333</td>
            <td>333</td>
            
        </tr>
        <tr>
            <td>444</td>
            <td>444</td>
            <td>444</td>
            <td>444</td>
            <td>444</td>
            <td>444</td>
            
        </tr>
        <tr>
            <td>555</td>
            <td>555</td>
            <td>555</td>
            <td>555</td>
            <td>555</td>
            <td>555</td>
            
        </tr>
        <tr>
            <td>444</td>
            <td>444</td>
            <td>444</td>
            <td>444</td>
            <td>444</td>
            <td>END</td>
            
        </tr>        <tr>
            <td>444</td>
            <td>444</td>
            <td>444</td>
            <td>444</td>
            <td>444</td>
            <td>444</td>
            
        </tr>
        <tr>
            <td>111</td>
            <td>111</td>
            <td>111</td>
            <td>111</td>
            <td>111</td>
            <td>111</td>
            
        </tr>
        <tr>
            <td>222</td>
            <td>222</td>
            <td>222</td>
            <td>222</td>
            <td>222</td>
            <td>222</td>
            
        </tr>
        <tr>
            <td>333</td>
            <td>333</td>
            <td>333</td>
            <td>333</td>
            <td>333</td>
            <td>333</td>
            
        </tr>
        <tr>
            <td>444</td>
            <td>444</td>
            <td>444</td>
            <td>444</td>
            <td>444</td>
            <td>444</td>
            
        </tr>
        <tr>
            <td>555</td>
            <td>555</td>
            <td>555</td>
            <td>555</td>
            <td>555</td>
            <td>555</td>
            
        </tr>
        <tr>
            <td>444</td>
            <td>444</td>
            <td>444</td>
            <td>444</td>
            <td>444</td>
            <td>END</td>
            
        </tr>        <tr>
            <td>444</td>
            <td>444</td>
            <td>444</td>
            <td>444</td>
            <td>444</td>
            <td>444</td>
            
        </tr>
        <tr>
            <td>111</td>
            <td>111</td>
            <td>111</td>
            <td>111</td>
            <td>111</td>
            <td>111</td>
            
        </tr>
        <tr>
            <td>222</td>
            <td>222</td>
            <td>222</td>
            <td>222</td>
            <td>222</td>
            <td>222</td>
            
        </tr>
        <tr>
            <td>333</td>
            <td>333</td>
            <td>333</td>
            <td>333</td>
            <td>333</td>
            <td>333</td>
            
        </tr>
        <tr>
            <td>444</td>
            <td>444</td>
            <td>444</td>
            <td>444</td>
            <td>444</td>
            <td>444</td>
            
        </tr>
        <tr>
            <td>555</td>
            <td>555</td>
            <td>555</td>
            <td>555</td>
            <td>555</td>
            <td>555</td>
            
        </tr>
        <tr>
            <td>444</td>
            <td>444</td>
            <td>444</td>
            <td>444</td>
            <td>444</td>
            <td>END</td>
            
        </tr>        <tr>
            <td>444</td>
            <td>444</td>
            <td>444</td>
            <td>444</td>
            <td>444</td>
            <td>444</td>
            
        </tr>
        <tr>
            <td>111</td>
            <td>111</td>
            <td>111</td>
            <td>111</td>
            <td>111</td>
            <td>111</td>
            
        </tr>
        <tr>
            <td>222</td>
            <td>222</td>
            <td>222</td>
            <td>222</td>
            <td>222</td>
            <td>222</td>
            
        </tr>
        <tr>
            <td>333</td>
            <td>333</td>
            <td>333</td>
            <td>333</td>
            <td>333</td>
            <td>333</td>
            
        </tr>
        <tr>
            <td>444</td>
            <td>444</td>
            <td>444</td>
            <td>444</td>
            <td>444</td>
            <td>444</td>
            
        </tr>
        <tr>
            <td>555</td>
            <td>555</td>
            <td>555</td>
            <td>555</td>
            <td>555</td>
            <td>555</td>
            
        </tr>
        <tr>
            <td>444</td>
            <td>444</td>
            <td>444</td>
            <td>444</td>
            <td>444</td>
            <td>END</td>
            
        </tr>        <tr>
            <td>444</td>
            <td>444</td>
            <td>444</td>
            <td>444</td>
            <td>444</td>
            <td>444</td>
            
        </tr>
        <tr>
            <td>111</td>
            <td>111</td>
            <td>111</td>
            <td>111</td>
            <td>111</td>
            <td>111</td>
            
        </tr>
        <tr>
            <td>222</td>
            <td>222</td>
            <td>222</td>
            <td>222</td>
            <td>222</td>
            <td>222</td>
            
        </tr>
        <tr>
            <td>333</td>
            <td>333</td>
            <td>333</td>
            <td>333</td>
            <td>333</td>
            <td>333</td>
            
        </tr>
        <tr>
            <td>444</td>
            <td>444</td>
            <td>444</td>
            <td>444</td>
            <td>444</td>
            <td>444</td>
            
        </tr>
        <tr>
            <td>555</td>
            <td>555</td>
            <td>555</td>
            <td>555</td>
            <td>555</td>
            <td>555</td>
            
        </tr>
        <tr>
            <td>444</td>
            <td>444</td>
            <td>444</td>
            <td>444</td>
            <td>444</td>
            <td>END</td>
            
        </tr>
    </tbody>
    <tfoot>
        <td>444</td>
        <td>444</td>
        <td>444</td>
        <td>444</td>
        <td>444</td>
        <td>END</td>
    </tfoot>
        
    </table>

</body>
</html>
posted @ 2009-09-23 13:44  阿牛  阅读(15183)  评论(13)  编辑  收藏  举报