谁有table中tr行上下滚动显示的代码？

dawangcat 2016-06-30 03:30:58

<table>
<thead>
<tr>
<th>表头1</th><th>表头2</th>
</tr>
</thead>
<tbody>
<tr><td>内容1</td><td>内容2</td></tr>
<tr><td>内容1</td><td>内容2</td></tr>
<tr><td>内容1</td><td>内容2</td></tr>
<tr><td>内容1</td><td>内容2</td></tr>
<tr><td>内容1</td><td>内容2</td></tr>
<tr><td>内容1</td><td>内容2</td></tr>
<tr><td>内容1</td><td>内容2</td></tr>
<tr><td>内容1</td><td>内容2</td></tr>
<tr><td>内容1</td><td>内容2</td></tr>
<tr><td>内容1</td><td>内容2</td></tr>
<tr><td>内容1</td><td>内容2</td></tr>
<tr><td>内容1</td><td>内容2</td></tr>
<tr><td>内容1</td><td>内容2</td></tr>
<tr><td>内容1</td><td>内容2</td></tr>
</tbody>
</table>

在页面上只显示5行，body中的其它tr行上下滚动显示怎么写JS代码？thead不动，不希望在外面套DIV框什么的。

...全文

202 7 打赏收藏转发到动态举报

写回复

用AI写文章

7 条回复

切换为时间正序

请发表友善的回复…

发表回复

dawangcat 2016-07-01

打赏
举报

引用 6 楼 zhaocheng_2015 的回复:

[quote=引用 5 楼 qq_25597817 的回复:] [quote=引用 4 楼 zhaocheng_2015 的回复:] [quote=引用 3 楼 qq_25597817 的回复:] [quote=引用 2 楼 zhaocheng_2015 的回复:]

谢谢，我是希望tr能自动上下滚动的。[/quote] 那就用定时器呗，要做无缝连接，就在到底部的时候就把最上面的tr放到最底下就行了[/quote] 能不能给段JS代码？[/quote] 我是懒得写了，用setInterval(function(){}, 10)来定时执行用document.getElementsByClassName(".box tbody").scrollTop改变滚动条位置自己动手做做吧，不难[/quote] ok,我看一下自己写吧，谢谢你了。

zhaocheng_2015 2016-06-30

打赏
举报

引用 5 楼 qq_25597817 的回复:

[quote=引用 4 楼 zhaocheng_2015 的回复:] [quote=引用 3 楼 qq_25597817 的回复:] [quote=引用 2 楼 zhaocheng_2015 的回复:]

dawangcat 2016-06-30

打赏
举报

引用 4 楼 zhaocheng_2015 的回复:

[quote=引用 3 楼 qq_25597817 的回复:] [quote=引用 2 楼 zhaocheng_2015 的回复:]

谢谢，我是希望tr能自动上下滚动的。[/quote] 那就用定时器呗，要做无缝连接，就在到底部的时候就把最上面的tr放到最底下就行了[/quote] 能不能给段JS代码？

zhaocheng_2015 2016-06-30

打赏
举报

引用 3 楼 qq_25597817 的回复:

[quote=引用 2 楼 zhaocheng_2015 的回复:]

谢谢，我是希望tr能自动上下滚动的。[/quote] 那就用定时器呗，要做无缝连接，就在到底部的时候就把最上面的tr放到最底下就行了

dawangcat 2016-06-30

打赏
举报

引用 2 楼 zhaocheng_2015 的回复:

谢谢，我是希望tr能自动上下滚动的。

zhaocheng_2015 2016-06-30

打赏
举报

css解决，我就写了个大概，具体美化你自己想去


<!DOCTYPE html>
<html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .box{
                width: 220px;
                height: 500px;
            }

                .box th, .box td{
                    width: 100px;
                    height: 30px;
                    text-align: center;
                    vertical-align: middle;
                }

                .box thead{
                    width: 200px;
                    height: 30px;
                    display: block;
                }

                .box tbody{
                    width: 220px;
                    height: 150px;
                    overflow: auto;
                    display: block;
                }

        </style>
    </head>
    <body>
        <table class="box" cellspacing="0" cellpadding="0" border="0">
            <thead>
                <tr>
                    <th>表头1</th><th>表头2</th>
                </tr>
            </thead>
            <tbody>
                <tr><td>内容1</td><td>内容2</td></tr>
                <tr><td>内容1</td><td>内容2</td></tr>
                <tr><td>内容1</td><td>内容2</td></tr>
                <tr><td>内容1</td><td>内容2</td></tr>
                <tr><td>内容1</td><td>内容2</td></tr>
                <tr><td>内容1</td><td>内容2</td></tr>
                <tr><td>内容1</td><td>内容2</td></tr>
                <tr><td>内容1</td><td>内容2</td></tr>
                <tr><td>内容1</td><td>内容2</td></tr>
                <tr><td>内容1</td><td>内容2</td></tr>
                <tr><td>内容1</td><td>内容2</td></tr>
                <tr><td>内容1</td><td>内容2</td></tr>
                <tr><td>内容1</td><td>内容2</td></tr>
                <tr><td>内容1</td><td>内容2</td></tr>
            </tbody>
        </table>
        <script type="text/javascript">
        </script>
    </body>
</html>