`
dufeifei
  • 浏览: 191118 次
  • 性别: Icon_minigender_2
  • 来自: 邯郸
社区版块
存档分类

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>

 

分享到：
| vm截取字符窜
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    table表格，让thead固定，tbody有滚动条，关键是都对齐的纯css写法

    table表格，让thead固定，tbody有滚动条，关键是都对齐的纯css写法。table表格，让thead固定，tbody有滚动条，关键是都对齐的纯css写法。table表格，让thead固定，tbody有滚动条，关键是都对齐的纯css写法。table...

    bootstrap表格固定表头并且tbody部分添加滚动条

    Bootstrap表格在设计网页时是一种非常常用的组件，尤其在处理大量数据时，为了提供更好的用户体验，我们经常需要在tbody部分添加竖向滚动条，同时保持表头固定不动。这样，当用户滚动内容时，表头始终保持可见，便于...

    用css给tbody加垂直滚动条的具体思路及样式代码

    在网页设计中，有时我们需要对表格的 tbody 部分添加垂直滚动条，以便当数据过多时，用户可以轻松地浏览和查看所有信息。这里我们将详细介绍如何使用 CSS 实现这一功能，并提供相应的代码示例。 首先，理解核心思路...

    CSS设置table下tbody的滚动条的实现

    CSS设置table下tbody的滚动条实现是一种网页布局技术，能够让HTML表格的tbody部分在内容超出可视区域时显示出垂直滚动条，而thead（表头）则保持固定不动。这种技术在制作具有大量数据内容的网页表格时非常有用，...

    jquery给表格加滚动条

    3. 添加CSS样式：为表格设置固定宽度和高度，然后为`&lt;tbody&gt;`添加垂直滚动条。 ```css #scrollingTable { width: 100%; height: 300px; overflow-y: auto; /* 添加垂直滚动条 */ } ``` 4. 使用jQuery：在文档加载...

    jQuery table scroll表格插件内容部分加滚动条

    在网页设计中，为了优化用户体验，尤其是在数据量庞大的表格展示时，经常需要用到表格滚动条功能。jQuery Table Scroll 插件正是解决这个问题的一个有效工具。它允许用户在表格内容区域添加垂直或水平滚动条，以便在...

    给表格加上滚动条.rar

    当表格内容过多导致超出容器时，我们通常会为表格的`&lt;thead&gt;`和`&lt;tbody&gt;`分别设置垂直滚动条，或者为整个表格设置水平或垂直滚动条。 在JavaScript中，我们可以利用CSS样式来控制滚动条的显示和隐藏。例如，可以...

    jquery给表格加滚动条.zip

    这个“jquery给表格加滚动条.zip”压缩包文件可能包含了一个使用jQuery库来实现表格滚动条的示例。jQuery是一个流行的JavaScript库，它简化了DOM操作、事件处理和动画效果等任务。在CSS、JavaScript和HTML5的配合下...

    table内容出现滚动条和表头对齐问题

    然而，当表格内容过多导致无法在单个视窗内完全显示时，滚动条就会出现，这时表头对齐问题就显得尤为重要。为了解决"table内容出现滚动条和表头对齐问题"，我们需要深入理解表格布局、CSS样式控制以及可能涉及到的...

    TABLE滚动条

    在IT领域，滚动条是用户界面（UI）设计中不可或缺的一部分，特别是在表格（TABLE）元素中，当数据过多无法在单个屏幕内显示时，滚动条提供了浏览整个内容的手段。"TABLE滚动条"这个主题涉及到网页开发中的HTML、CSS...

    纯CSS实现的表格滚动条效果

    在网页设计中，表格是一种常见的数据展示方式，而滚动条则是处理大量数据时不可或缺的元素。本主题聚焦于如何使用纯CSS技术来实现一个既美观又实用的表格滚动条效果。这种效果可以让用户在不改变表格整体布局的情况...

    固定表格的表头，使表体自动生成滚动条

    总的来说，通过合理的CSS样式设置，我们可以轻松实现ASP.NET页面中固定表头、自动滚动条以及列对齐的效果。这对于展示大量数据的网页来说非常实用，既能保持界面的整洁，又能提供良好的用户体验。

    纯CSS实现表头固定表格滚动条效果

    在网页设计中，当表格数据过多时，为了保持可读性，通常会使用滚动条来显示隐藏的内容。然而，一个常见的需求是使表格的表头在滚动时始终保持可见，这样用户在浏览长表格时仍能清楚地看到列名。本文将详细介绍如何仅...

    control_table:jquery+bootstrap 控制table中的th在浏览器滚动条滚动时,一直显示在tbody的上方

    jquery+bootstrap 控制table中的th在浏览器滚动条滚动时,一直显示在tbody的上方 这只是一个页面的content部分,header & footer并未添加 1.实际页面中,需要加上header的高度; 2.通过offset()获取th这一行所处的位置,...

    jsp中为表格添加水平滚动条的方法

    在网页设计中，有时我们需要在表格中添加水平滚动条以便在数据过多时用户可以方便地浏览。在JSP（JavaServer Pages）中，这可以通过HTML和CSS，以及可能的JavaScript来实现。以下是一个详细的步骤来解释如何在jsp...

    html表格头部固定 相应单元格宽度自适应内容区域单元格

    然而，当表格内容过多导致需要滚动时，表头通常会被滚动条遮挡，给用户查看和理解数据带来不便。为了解决这个问题，我们可以采用“表格头部固定”技术，确保无论表格内容如何滚动，表头始终可见。在本案例中，我们将...

    DataTables的垂直滚动条.zip

    本教程将重点讲解如何在 DataTables 中实现垂直滚动条，以解决当表格内容过多，无法在有限的屏幕空间内完全显示时的问题。 首先，我们需要确保已经正确地引入了 DataTables 的相关库文件。这包括 jQuery 库、...

Magicbox
Global site tag (gtag.js) - Google Analytics