给表格的TBody加上滚动条

最新推荐文章于 2023-12-12 15:23:32 发布
最新推荐文章于 2023-12-12 15:23:32 发布
阅读量113 收藏
点赞数
文章标签： javascript ViewUI

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

　　先看下效果图：
2009092711000527.jpg

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

<! 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 >
weixin_34406086
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
bootstrap表格固定表头并且tbody部分添加滚动条
10-24
bootstrap的tbody加竖向滚动条，而且当前表格的表头。bootstrap的tbody加竖向滚动条，而且当前表格的表头。bootstrap的tbody加竖向滚动条，而且当前表格的表头。
表格 tbody 上加滚动条
一念执着
05-16 593
bootstrap.mim.css /*! * Bootstrap v3.3.0 (http://getbootstrap.com) * Copyright 2011-2014 Twitter, Inc. * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) *//*! normalize.css v3.0.2 | MIT License | git.io/normalize */html{fon
给表格的tbody加滚动条，滚动条美化
nann-viiv 的博客
06-10 1545
html页面 <div id="toolListDiv"> <table id="toolListTable"> <thead> <tr> <th>序号</th> <th>工具</th> ...
BootStrap的table表头固定tbody滚动的实例代码
11-25
关于bootstrap table其他知识不多说，直接给大家贴代码了。 关键代码如下所示： <!DOCTYPE html> <html> <head> <title></title> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> [removed][removed] <script type="text/javascript" src="js/jquery-1.
使用jQuery填充tbody时，填充了两倍数据
解忧swag的博客
10-20 392
前端页面相关代码 <table class="table table-condensed table-striped"> <tr> <th>用户编号</th> <th>用户姓名</th> <th>登陆账号</th> <th>电话</th> <th>微信号</th> <th>身份证号</th&g
给表格加上滚动条特效代码
03-20
"给表格加上滚动条特效代码" 主要涉及HTML、CSS以及可能的JavaScript技术，旨在使用户能够方便地浏览和交互大量数据。 一、HTML基础 HTML（超文本标记语言）是网页的基础，用于构建页面结构。在HTML中，`<table>`...
CSS设置table下tbody的滚动条的实现
09-22
主要介绍了CSS设置table下tbody的滚动条的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
给表格加上滚动条.rar
07-05
在IT领域，尤其是在网页开发中，表格是一种常用的数据展示方式，尤其在处理大量数据时，为了提高用户体验，我们经常需要给表格添加滚动条。本文将深入探讨如何利用JavaScript（JS）实现这一功能，并结合“表格图层”...
jsp中为表格添加水平滚动条的方法
10-21
在网页设计中，有时我们需要在表格中添加水平滚动条以便在数据过多时用户可以方便地浏览。在JSP（JavaServer Pages）中，这可以通过HTML和CSS，以及可能的JavaScript来实现。以下是一个详细的步骤来解释如何在jsp...
table表格，让thead固定，tbody有滚动条，关键是都对齐的纯css写法
09-30
table表格，让thead固定，tbody有滚动条，关键是都对齐的纯css写法。table表格，让thead固定，tbody有滚动条，关键是都对齐的纯css写法。table表格，让thead固定，tbody有滚动条，关键是都对齐的纯css写法。table...
table表格的thead固定，tbody展示出滚动条
最新发布
m0_66226018的博客
12-12 1483
我也是做了两次的table表格的thead固定，tbody展示出滚动条，第一次因为是存在有表头合并的原因没有做出来完好的效果，第二次是不仅有表头的合并，还有tbody中的rowspan的合并。
用css 给tbody加垂直滚动条
热门推荐
BetterBOB的专栏
02-08 2万+
思路就是 1，把tbody设置成display:block，然后就对其高度设置一个固定值，overflow设置成auto。 2，把thead的tr设置成display:block。 3，因为都设置成block所以要给td手动添加宽度 width:200px 代码如下：
table给tbody设置滚动条
weixin_34192993的博客
10-09 1078
table结构例子： &lt;table class="layui-table"&gt; &lt;thead&gt; &lt;tr&gt; &lt;th&gt; 贷款项目 &...
height、clientHeight、scrollHeight、offsetHeight区别
weixin_30587927的博客
12-02 119
我们来实现test中的onclick事件 function justAtest(){ var test= document.getElementById("test"); var test2=document.getElementById("test2") var test3=document.getElementById...
table表格，让thead固定，tbody有滚动条
sinat_41274057的博客
10-29 1559
** table表格，让thead固定，tbody有滚动条，关键是都对齐的纯css写法。 ** 找了好久才找到一篇可以简单粗暴就能用的，所以拿过来算是收藏了。里面有一个css2里的命令是我没 用过的也是这里面关键的：table-layout:fixed; 原理很简单，有爱研究的童鞋可以去css官网看看说明文档。 转载自：博客园 ：webSong https://www.cnblogs.com/...
Bootstrap为模态框添加滚动条
qq_33934427的博客
09-05 1615
Bootstrap为模态框添加滚动条 转载至bootstrap模态框加滚动条的方法 <style type="text/css"> .modal-dialog { position: absolute; top: 0; bottom: 0; left: 0; right: 0; } .modal-content { /*overflow-y: scroll; */
如何用纯CSS固定thead实现表格滚动？tbody设置overflow之密
Vilien (Mr.Bin) 技术笔记
07-29 9896
首先，大家是不是在做下面代码这样的尝试？ THEAD-TD1THEAD-TD2 style="height:100px;overflow:auto;"> TBODY-TD1TBODY-TD2 TBODY-TD1TBODY-TD2 TBODY-TD1TBODY
Bootstrap——table标签使用横向滚动条解决方案
无限迭代中......
02-15 1万+
官方文档 https://v4.bootcss.com/docs/content/tables/ 解决方案 方法一：原生CSS 给table标签添加CSS属性 table显示滚t动条，要先把table放到一个div中，控制div 属性overflow值为scroll <div style="overflow:scroll;"> ······ ······ </di...
css tbody 纵向滚动条
06-10
这将会在 `tbody` 元素中添加一个纵向滚动条，当表格内容超出 `tbody` 的高度时，就可以通过滚动条来滚动表格内容。如果你想要显示一个固定高度的表格，并且在表格内容超出这个高度时出现滚动条，可以使用下面的代码...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值