表中的圆形行开关

时间:2014-04-02 07:59:16

标签: javascript jquery html

假设有5X6表 -

<script>
    // appending the table with the fields . 
    $("body").append("<table><tbody></tbody></table>");
    (function () {
        for (var row = 1; row <= 5; row++) {
            $("tbody").append("<tr></tr>")
            for (var col = 1; col <= 6; col++) {
                $("tr:last").append("<td></td>");
                $("td:last").append(row + '-' + col);
            }
        }
    })()
</script>

我想在它上面执行 *循环切换 -

<script>
    function switchDown() {
        for (var row = 0; row <= 4; row++) {
            var temp = $("tr:eq( (row+1)%4 )");
            $("tr:eq(row)").insertAfter(temp);
        }
    }
</script>

上述功能不对表格进行任何更改。

修改

  • 循环切换 - 表示每个索引转到(索引+ 1)&n;索引,即 -

切换前的表格 -

(1,1) (1,2) (1,3)
(2,1) (2,2) (2,3)
(3,1) (3,2) (3,3)
切换后

将是 -

(3,1) (3,2) (3,3)
(1,1) (1,2) (1,3)
(2,1) (2,2) (2,3)

再过一次后,它会是 -

(2,1) (2,2) (2,3)
(3,1) (3,2) (3,3)
(1,1) (1,2) (1,3)

再过一次后,就会像开始时一样。

依旧......

1 个答案:

答案 0 :(得分:2)

尝试使用JavaScript中的row变量计算表达式,jQuery无法对其进行求值;)

for (var row = 0  ; row <= 4 ; row++) {
    var index = (row + 1) % 4;
    var temp = $("tr:eq(" + index + ")");
    $("tr:eq(" + row + ")").insertAfter(temp);
}

这是一个fiddle,但我不确定该功能是否符合您的要求 - 如果您需要进一步的帮助,您需要在问题中提供更多详细信息。

<强>更新

关于问题中的编辑:这应该很简单,只需使用

即可
function switchDown() {
    $("tr:last").insertBefore("tr:first");
}

Fiddle