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

最新推荐文章于 2023-01-28 16:15:07 发布

zoutuo_1986

最新推荐文章于 2023-01-28 16:15:07 发布

阅读量478

点赞数

分类专栏：我的异常 copy来的文章标签： python 前端 javascript ViewUI

本文链接：https://blog.csdn.net/zoutuo_1986/article/details/84129706

版权

我的异常同时被 2 个专栏收录

40 篇文章 0 订阅

订阅专栏

copy来的

36 篇文章 0 订阅

订阅专栏

-------------------------------

三年前的copy来的代码

当时使用没问题

现在使用高版本jquery 却出现了问题

把 $sb.attr("scrollHeight")

改成了 $sb[0].scrollHeight

又可以用了

--------------------------------

<html>
<head>
<title>Untitled</title>
<script type="text/javascript"
src="http://localhost:8080/oa/resources/plug/jquery/1.11.2/jquery-1.11.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);
            debugger;
            var nNewIndex = Math.floor($sb.scrollTop() / $sb[0].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="5">
<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>111</td><td>111</td><td>111</td><td>111</td><td>111</td><td>111</td></tr>
<tr><td>111</td><td>111</td><td>111</td><td>111</td><td>111</td><td>111</td></tr>
<tr><td>111</td><td>111</td><td>111</td><td>111</td><td>111</td><td>111</td></tr>
<tr><td>111</td><td>111</td><td>111</td><td>111</td><td>111</td><td>111</td></tr>
<tr><td>111</td><td>111</td><td>111</td><td>111</td><td>111</td><td>111</td></tr>
<tr><td>111</td><td>111</td><td>111</td><td>111</td><td>111</td><td>111</td></tr>
<tr><td>111</td><td>111</td><td>111</td><td>111</td><td>111</td><td>111</td></tr>
<tr><td>111</td><td>111</td><td>111</td><td>111</td><td>111</td><td>111</td></tr>
<tr><td>111</td><td>111</td><td>111</td><td>111</td><td>111</td><td>111</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>

zoutuo_1986

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
让table带上滚动条(部分隐藏tr的)

-------------------------------三年前的copy来的代码当时使用没问题现在使用高版本jquery 却出现了问题把 $sb.attr("scrollHeight")改成了 $sb[0].scrollHeight又可以用了--------------------------------&lt;html&gt;&lt;head&...
复制链接

扫一扫

专栏目录