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

你的for循环在你的桌子外面，所以你最终会得到一些具有相同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>

Answer 2

首先修复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

如何在表格中滑动行？

2 个答案: