当前位置: 代码迷 >> Web前端 >> 让table带下滚动条(部分隐藏tr的)
  详细解决方案

让table带下滚动条(部分隐藏tr的)

热度:109   发布时间:2012-08-30 09:55:54.0
让table带上滚动条(部分隐藏tr的)

一、不隐藏表头,隐藏部分tr,在table右侧加上滚动条。(copy)

?

<html> 
<head> 
    <title>Untitled</title> 
    <script type="text/javascript" src="jquery-1.4.4.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> 
</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><!--已经省略掉了10多行tr-->
            </tbody> 
    </table> 
</body> 
</html>

?

  相关解决方案