滑块 HTML 表格行向上并重复答案

【问题标题】：Slide HTML Table rows up and repeate滑块 HTML 表格行向上并重复
【发布时间】：2013-04-17 09:28:00
【问题描述】：

我在做一个项目时发现了一些很酷的代码。它影响 html 表的 jquery。它基本上使 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>

变成：

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

第 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>

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

这是jsfiddle 示例。

【问题讨论】：

最大的问题是移动台体而不移动台头。我一直在环顾四周，我可以找到一种方法来做到这一点。如果我可以在不移动 thead 的情况下移动 tbody，那么滑动 tbody 会很容易
事实上，我根本无法对 tbody 应用任何位置样式。他们什么都不做。

标签： javascript jquery scroll html-table

【解决方案1】：

向上/向下滑动 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;
};

Updated fiddle

【讨论】：

谢谢。我更喜欢这个。另外，它可以做更多我想做的事情

【解决方案2】：

我不确定您在上面添加的插件，但这是另一种快速解决方法，如您所描述的那样工作，在我看来更简单一些。可能有更好的方法来解决它。

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

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

这是Fiddle example.

【讨论】：