Javascript 向上滑动HTML表格行并重复

我在一个项目中发现了一些很酷的代码。它的jquery影响html表。它基本上使tbody向上滚动，使位于顶部的行转到底部，其余行向上移动。这就是我的意思：

<tr><td>1a</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
<tr><td>1b</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
<tr><td>1c</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
<tr><td>1d</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>

1a23456
1b23456
1c23456
1d23456

变成：

<tr><td>1b</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
<tr><td>1c</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
<tr><td>1d</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
<tr><td>1a</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>

1b23456
1c23456
1d23456
1a23456

第1a行移到底部。这是我正在使用的jquery代码：

<script type="text/javascript">
$.fn.infiniteScrollUp=function(){
    var self=this,kids=self.children()
    kids.slice(20).hide()
    setInterval(function(){
        kids.filter(':hidden').eq(0).fadeIn()
        kids.eq(0).fadeOut(function(){
            $(this).appendTo(self)
            kids=self.children()
        })
    },5000)
    return this
}
$(function(){
    $('tbody').infiniteScrollUp()
})
</script>

$.fn.InfiniteSrollup=函数（）{
var self=this，kids=self.children（）
kids.slice（20.hide）（）
setInterval（函数（）{
kids.filter（':hidden'）.eq（0）.fadeIn（）
kids.eq（0）.fadeOut（函数（）{
$（this）.appendTo（self）
kids=self.children（）
})
},5000)
还这个
}
$（函数（）{
$（'tbody'）.InfiniteSrollup（）
})

这个很好用。没问题。然而，当我试图让它向上滑动时，就像某种卷轴一样，它要么1）停止向底部添加，要么2）停止从顶部移除，要么3）什么都不做。如何将此效果更改为向上滑动

---

这是一个例子。

我不确定您在上面添加的插件，但这里有另一个快速解决方法，正如您所描述的，在我看来稍微简单一点。也许有更好的解决办法

function moveRows(){
   firstTR = $('tbody tr').first();
    firstTR.animate({opacity:0},
      function(){$('tbody').append(firstTR);});
    firstTR.animate({opacity:1});
}

setInterval(function(){
    moveRows();
},1000);

---

这里有一个

上下滑动tr元件是很棘手的。它们的行为与块元素不同

这是我能做到的最好的：

$.fn.infiniteScrollUp = function() {
    var self = this;
    var kids = self.children();
    kids.children('td, th').wrapInner('<div class="dummy"/>')
    setInterval(function() {
        var first = kids.eq(0),
            clone = first.clone().appendTo(self);
        first.find(".dummy").slideUp(1000, function() {
            kids = kids.not(first).add(clone);
            first.remove();
        });
    }, 2000);
    return this;
};

$.fn.infiniteScrollUp=函数（）{
var self=这个；
var kids=self.children（）；
孩子们。孩子们（'td，th'）。愤怒者（''）
setInterval（函数（）{
var first=儿童情商（0），
clone=first.clone（）.appendTo（self）；
首先，查找（“.dummy”）.slideUp（1000，function（）{
kids=kids.not（第一个）。添加（克隆）；
首先，删除（）；
});
}, 2000);
归还这个；
};

---

最大的问题是移动桌体而不移动桌头。我一直在四处寻找，我能找到一种方法来做到这一点。如果我可以在不移动thead的情况下移动tbody，那么滑动tbody将非常容易。事实上，我根本无法将任何位置样式应用于tbody。他们什么也不做。谢谢。我更喜欢这个。另外，它能做更多我想做的事情