怎样让一个Table下的所有<tr>组滚动显示？- 用JQuery。

本帖最后由 ThankU 于 2010-10-09 22:55:13 编辑

解决方案 »

  1.   

    function scrollNews() {
        var areaEl = document.getElementById("lastNewsCon"),//放Table的层
                areaHeight = 200,
                conEl = document.getElementById("newsCon"),//Table
                height = conEl.offsetHeight,
                stopscroll = false;
        globalParams.newsScroll.areaEl = areaEl;
        globalParams.newsScroll.stopscroll = stopscroll;
        globalParams.newsScroll.height = height;
        //初始化滚动内容
        if (!$.trim(conEl.innerHTML) || height < areaHeight)
            return;
        conEl.innerHTML += conEl.innerHTML;
        conEl.onmouseover = function() {
            globalParams.newsScroll.stopscroll = true;
            return false;
        }
        conEl.onmouseout = function() {
            globalParams.newsScroll.stopscroll = false;
            return false;
        }
        window.setInterval("scrollUp()", 200);
    }
    function scrollUp() {
        var p = globalParams.newsScroll;
        if (p.stopscroll == true) return;
        if (p.areaEl.scrollTop == p.height - 2)
            p.areaEl.scrollTop = 0;
        else
            p.areaEl.scrollTop += 2;
    }
      

  2.   

    请问楼上，你的代码和table1有关联么？怎样使下面的tr滚动起来呢？<table class="class1" id="table1">
      <tr><td .../><td .../></tr>
      <tr><td .../><td .../></tr>
      <tr><td .../><td .../></tr>
      ...
    </table>
      

  3.   


    <script>
    //从下往上滚
    function scroll1(){
    var table = document.getElementById("table1").getElementsByTagName("tbody")[0];//$("#table1 > tbody").get(0)
    var row = table.firstChild;
    table.removeChild(row);
    table.appendChild(row); //可以通过ajax去取后面的数据
    }
    //从上往下滚
    function scroll2(){
    var table = document.getElementById("table1").getElementsByTagName("tbody")[0];
    var row = table.lastChild;
    table.removeChild(row);
    table.insertBefore(row,table.firstChild);
    }
    </script><table class="class1" id="table1" onmouseover="this.int=window.setInterval('scroll2()',1000)" onmouseout="window.clearInterval(this.int)">
      <tr><td>aaa</td><td>aaa</td></tr>
     <tr><td>bbb</td><td>bbb</td></tr>
     <tr><td>ccc</td><td>ccc</td></tr>
     <tr><td>xxx</td><td>xxx</td></tr>
     <tr><td>yyy</td><td>yyy</td></tr>
     <tr><td>zzz</td><td>zzz</td></tr>
    </table>
      

  4.   


        <script type="text/javascript" language="javascript">
            function  Scroll(opt,callback){
                    scrollBox = $("#table1");
                    if(!opt) var opt={};
                    var _this=scrollBox.eq(0).find("tr:first");
                    var lineH=_this.find("td:first").height(), //获取行高
                        line=opt.line?parseInt(opt.line,10):parseInt(scrollBox.height()/lineH,10), //每次滚动的行数，默认为一屏，即父容器高度
                        speed=opt.speed?parseInt(opt.speed,10):5000, //卷动速度，数值越大，速度越慢（毫秒）
                        timer=opt.timer?parseInt(opt.timer,10):3000; //滚动的时间间隔（毫秒）
                    if(line==0) line=1;
                    var upHeight=0-line*lineH;
                    //滚动函数
                    scrollUp=function(){
                            _this.animate({
                                    marginTop:upHeight
                            },speed,function(){
                                    for(i=1;i<=line;i++){
       _this.find("td:first").appendTo(_this);
                                    }
                                    _this.css({marginTop:0});
                            });
                    }
                    //鼠标事件绑定
                    timerID = setInterval("scrollUp()",timer);
                    _this.hover(function(){
                        clearInterval(timerID);
                    },function(){
                            timerID = setInterval("scrollUp()",timer);
                    }).mouseout();
            }
            $(document).ready(function(){
                    Scroll({line:1,speed:600,timer:2000});
            });
        </script>
      

  5.   

    你确定不工作？ 我那个ie8 firefox4下都可以啊
      

  6.   

    classnameextendsjava, 我把您的代码拷贝保存为一个HTML文件，双击执行(ie/firefox)，只显示DIV的内容，根本不滚动啊。是不是代码不全呢？
      

  7.   

    晕 你不会html？？？<html>
    <head>
    <script>
            //从下往上滚
            function scroll1(){
                var table = document.getElementById("table1").getElementsByTagName("tbody")[0];//$("#table1 > tbody").get(0)
                var row = table.firstChild;
                table.removeChild(row);    
                table.appendChild(row);    //可以通过ajax去取后面的数据
            }    
            //从上往下滚
            function scroll2(){
                var table = document.getElementById("table1").getElementsByTagName("tbody")[0];
                var row = table.lastChild;
                table.removeChild(row);    
                table.insertBefore(row,table.firstChild);
            }            
    </script>
    </head>
    <body>
    <table class="class1" id="table1" onmouseover="this.int=window.setInterval('scroll2()',1000)" onmouseout="window.clearInterval(this.int)">
      <tr><td>aaa</td><td>aaa</td></tr>
     <tr><td>bbb</td><td>bbb</td></tr>
     <tr><td>ccc</td><td>ccc</td></tr>
     <tr><td>xxx</td><td>xxx</td></tr>
     <tr><td>yyy</td><td>yyy</td></tr>
     <tr><td>zzz</td><td>zzz</td></tr>
    </table>
    </body>
    </html>
      

  8.   

    以下代码经过FF测试
    注意配置jquery引用<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <script src="jquery-1.3.2.min.js"></script>
    <script>
    $(function(){
    //t=setTimeout("show()",1000);
    t=setInterval("show()",1000)
    $("#table1").mouseover(function(){
    //alert($("#table1 tr:first").children("td:first").text());
    //$("#table1 tr:first").appendTo($(this));
    clearInterval(t);
    //window.clearInterval(this.int)
    }).mouseout(function(){
    t=setInterval("show()",1000);
    //window.setInterval('scroll2()',1000)
    })
    //window.setInterval('scroll2()',1000)
    })function show(){
    $("#table1 tr:first").appendTo($("#table1"));
    //alert('aaaa');
    //$("#table1 tr:first").appendTo($("#table1"));
    //$("#table1 tr:first").remove();

    }
                  
    </script>
    </head>
    <body>
    <table id="table1">
      <tr><td>aaa</td><td>aaa</td></tr>
     <tr><td>bbb</td><td>bbb</td></tr>
     <tr><td>ccc</td><td>ccc</td></tr>
     <tr><td>xxx</td><td>xxx</td></tr>
     <tr><td>yyy</td><td>yyy</td></tr>
     <tr><td>zzz</td><td>zzz</td></tr>
    </table>
    </body>
    </html>
      

  9.   

    试了一下 ，classnameextendsjava  提供的代码不行。
      

  10.   

    如果普通需求 我认为没必要用JS<marquee direction="up" style="height:100px;" onmouseover="this.stop();" onmouseout="this.start();">
    <table id="userlist" name="hh">
    <tbody>
    <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    </tr>
    <tr>
    <td>11</td>
    <td>22</td>
    <td>33</td>
    <td>44</td>
    </tr>
    <tr>
    <td>111</td>
    <td>222</td>
    <td>333</td>
    <td>444</td>
    </tr>
    <tr>
    <td>111</td>
    <td>222</td>
    <td>333</td>
    <td>444</td>
    </tr>
    <tr>
    <td>11</td>
    <td>22</td>
    <td>33</td>
    <td>44</td>
    </tr>
    </tbody>
    </table>
    </marquee>