如何在表格中滑动行？

Question

我有这个表格和下面的脚本。主要思想是每 3 秒更改一次表行中的数据......所以第一次它将是 1，3 秒后它将是 2，依此类推。当我使用这个脚本数据变得疯狂（显示第一行就是这样）。有人可以帮助我并告诉我我需要改变什么吗？

HTML

 <table>

    <tr>
        <th>naslov1</th>
        <th>naslov2</th>
        <th>naslov3</th>
    </tr>


    @for (int i = 0; i < 5; i++)
    {
        <tbody id="tableslide">
            <tr>

                <td>test_@i</td>
                <td>test_@i</td>
                <td>test_@i</td>
            </tr>
        </tbody>
    }


</table>

Javascript

<script>
    $(function () {
    $("#tableslide > tr:gt(0)").hide();

    setInterval(function () {

        $('#tableslide >tr:first')
          .slideToggle(1)
          //.fadeOut(300)
          .next()

          //.fadeIn(300)
          .slideToggle(1)
          .end()
          .appendTo('#tableslide');
</script>

    }, 3000);

});

我想在一张幻灯片上显示前三行...然后是后两行

Answer 1

首先修复 HTML 以将 <tbody> 和 </tbody> 标记放在循环之外，否则每行只有一个 tbody。

<tbody id="tableslide">
@for (int i = 0; i < 5; i++) {
    <tr>
        <td>test_@i</td>
        <td>test_@i</td>
        <td>test_@i</td>
    </tr>
}
</tbody>

.slideUp()、.slideDown()、.slideToggle() 不能可靠地用于表行，但您可以使用 .fadeOut() 和 .fadeIn()，如下所示：

$(function () {
    var selectors = [
        ":lt(3)",
        ":gt(2)"
    ];
    var $tableslide = $("#tableslide").children(selectors[1]).hide().end();
    var state = false;
    setInterval(function () {
        var s = state;
        $tableslide.children(selectors[+s]).fadeOut().promise().then(function () {
            $tableslide.children(selectors[+!s]).fadeIn();
        });
        state = !state;
    }, 3000);
});

DEMO

Answer 2

您的 for 循环位于表格主体之外，因此您最终会得到 i 数量具有相同 ID 的表格。我想你想为每个循环迭代添加一行？

Here 是在正确位置使用循环的小提琴（在示例中给出 3 行）

<tbody id="tableslide">
    @for (int i = 0; i < 5; i++)
    {
        <tr>
            <td>@i</td>
            <td>@i</td>
            <td>@i</td>
        </tr>
    }
</tbody>