怎样设置tbody里面的滚动

怎样设置tbody里面的滚动,第1张

以单独做一个滚动条,让滚动条的位置变化时,只显示TBody中指定范围的TR来实现滚动,便有了下面的实现,可以在IE/FF下运行,在滚动条上滚动鼠标轮时可以实现TBody滚动。

<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())

1.<!--div比table大小要小才会显示-->

2.<div style="overflow-x: auto overflow-y: auto height: 100px width:200px">

3.   <table id="table" border="1" align="center" width="300px" height="200px">

4. <tbody>

5.  <tr><td>00</td><td>01</td><td>02</td><td>03</td><td>04</td><td>05</td></tr>

6.  <tr><td>10</td><td>11</td><td>12</td><td>13</td><td>15</td><td>15</td></tr>

7.  <tr><td>20</td><td>21</td><td>22</td><td>23</td><td>24</td><td>25</td></tr>

8.  <tr><td>30</td><td>31</td><td>32</td><td>33</td><td>34</td><td>35</td></tr>

9. </tbody>

10.</table>

11. </body>

12. </div>


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/bake/11786895.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-18
下一篇 2023-05-18

发表评论

登录后才能评论

评论列表(0条)

保存