怎样让一个Table下的所有<tr>组滚动显示？用JQuery。该如何处理

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

如例所示，每组<tr>都是一条数据，我想让数据从上到下滚动显示，当鼠标停留在数据上的时候暂定滚动。

JScript code

&lt;table class="class1" id="table1"&gt;  &lt;tr&gt;&lt;td .../&gt;&lt;td .../&gt;&lt;/tr&gt;  &lt;tr&gt;&lt;td .../&gt;&lt;td .../&gt;&lt;/tr&gt;  &lt;tr&gt;&lt;td .../&gt;&lt;td .../&gt;&lt;/tr&gt;  ...&lt;/table&gt;

[解决办法]
用EXT吧!只是见过,没有用过.
[解决办法]
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;
}
[解决办法]

JScript code

&lt;script&gt;        //从下往上滚        function scroll1(){            var table = document.getElementById("table1").getElementsByTagName("tbody")[0];//$("#table1 &gt; 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);        }            &lt;/script&gt;&lt;table class="class1" id="table1" onmouseover="this.int=window.setInterval('scroll2()',1000)" onmouseout="window.clearInterval(this.int)"&gt;  &lt;tr&gt;&lt;td&gt;aaa&lt;/td&gt;&lt;td&gt;aaa&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;bbb&lt;/td&gt;&lt;td&gt;bbb&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;ccc&lt;/td&gt;&lt;td&gt;ccc&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;xxx&lt;/td&gt;&lt;td&gt;xxx&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;yyy&lt;/td&gt;&lt;td&gt;yyy&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;zzz&lt;/td&gt;&lt;td&gt;zzz&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
[解决办法]

   &lt;script type="text/javascript" language="javascript"&gt;
       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&lt;=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});
       });
   &lt;/script&gt;
[解决办法]
探讨
没有一个工作的代码。。。

[解决办法]
晕 你不会html？？？
HTML code&lt;html&gt;&lt;head&gt;&lt;script&gt;        //从下往上滚        function scroll1(){            var table = document.getElementById("table1").getElementsByTagName("tbody")[0];//$("#table1 &gt; 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);        }            &lt;/script&gt;&lt;/head&gt;&lt;body&gt;&lt;table class="class1" id="table1" onmouseover="this.int=window.setInterval('scroll2()',1000)" onmouseout="window.clearInterval(this.int)"&gt;  &lt;tr&gt;&lt;td&gt;aaa&lt;/td&gt;&lt;td&gt;aaa&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;bbb&lt;/td&gt;&lt;td&gt;bbb&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;ccc&lt;/td&gt;&lt;td&gt;ccc&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;xxx&lt;/td&gt;&lt;td&gt;xxx&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;yyy&lt;/td&gt;&lt;td&gt;yyy&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;zzz&lt;/td&gt;&lt;td&gt;zzz&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/body&gt;&lt;/html&gt;
[解决办法]
以下代码经过FF测试
注意配置jquery引用
JScript code&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;&lt;head&gt;&lt;script src="jquery-1.3.2.min.js"&gt;&lt;/script&gt;&lt;script&gt;$(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();    }              &lt;/script&gt;&lt;/head&gt;&lt;body&gt;&lt;table id="table1"&gt;  &lt;tr&gt;&lt;td&gt;aaa&lt;/td&gt;&lt;td&gt;aaa&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;bbb&lt;/td&gt;&lt;td&gt;bbb&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;ccc&lt;/td&gt;&lt;td&gt;ccc&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;xxx&lt;/td&gt;&lt;td&gt;xxx&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;yyy&lt;/td&gt;&lt;td&gt;yyy&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;zzz&lt;/td&gt;&lt;td&gt;zzz&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/body&gt;&lt;/html&gt; 
 
[解决办法]
额，忘了删除那些注释掉的没用的代码了，删掉后，其实很短的一段
[解决办法]
试了一下 ，classnameextendsjava  提供的代码不行。
[解决办法]
如果普通需求 我认为没必要用JS
HTML code&lt;marquee direction="up" style="height:100px;" onmouseover="this.stop();" onmouseout="this.start();"&gt;    &lt;table id="userlist" name="hh"&gt;        &lt;tbody&gt;            &lt;tr&gt;                &lt;td&gt;1&lt;/td&gt;                &lt;td&gt;2&lt;/td&gt;                &lt;td&gt;3&lt;/td&gt;                &lt;td&gt;4&lt;/td&gt;            &lt;/tr&gt;            &lt;tr&gt;                &lt;td&gt;11&lt;/td&gt;                &lt;td&gt;22&lt;/td&gt;                &lt;td&gt;33&lt;/td&gt;                &lt;td&gt;44&lt;/td&gt;            &lt;/tr&gt;            &lt;tr&gt;                &lt;td&gt;111&lt;/td&gt;                &lt;td&gt;222&lt;/td&gt;                &lt;td&gt;333&lt;/td&gt;                &lt;td&gt;444&lt;/td&gt;            &lt;/tr&gt;            &lt;tr&gt;                &lt;td&gt;111&lt;/td&gt;                &lt;td&gt;222&lt;/td&gt;                &lt;td&gt;333&lt;/td&gt;                &lt;td&gt;444&lt;/td&gt;            &lt;/tr&gt;            &lt;tr&gt;                &lt;td&gt;11&lt;/td&gt;                &lt;td&gt;22&lt;/td&gt;                &lt;td&gt;33&lt;/td&gt;                &lt;td&gt;44&lt;/td&gt;            &lt;/tr&gt;        &lt;/tbody&gt;    &lt;/table&gt;&lt;/marquee&gt;

怎样让一个Table下的所有lt;trgt;组滚动显

热点推荐