如何在表中滑动行

How to slide rows in table?

本文关键字：      更新时间：2023-09-26

下面有这个表和脚本。主要思想是每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);
});

我想在每张幻灯片上显示前三行。。。然后是第二个两行

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

你的for循环在你的表体之外，所以你最终会得到i个具有相同id的表。我想你想为每个循环迭代添加一行吗？

这里是一个在正确的地方摆弄循环（在示例中给出3行）

<tbody id="tableslide">
    @for (int i = 0; i < 5; i++)
    {
        <tr>
            <td>@i</td>
            <td>@i</td>
            <td>@i</td>
        </tr>
    }
</tbody>
相关文章：
  • 没有找到相关文章