Jquery检查表行移至顶部并在未选中时返回

Question

我对JQuery编程非常陌生，需要JQuery专家的一点帮助。 我想要表格行中的可固定功能。

情景：

1. 当我选中行中的复选框时，同一行会移到表格的顶部。
2. 当我取消选中任何已检查的行时，移动到移动它的同一位置。

jsfiddle demo：http://jsfiddle.net/safkass/DhpBw/8/

Answer 1

可以使用一些清理，但这似乎有效（jsfiddle）：

$(document).ready(function () {
            $('#grid').tablesorter({ widgets: ['staticRow'] });
            $("input").click(function () {
                var row = $(this).parents("tr:first");
                if ($(this).is(':checked', true)) {
                    var firstRow = row.parent().find("tr:first").not(row);
                    var index = row.parent().find("tr").index(row);
                    row.addClass("TopRow");
                    row.insertBefore(firstRow).data("prevIndex", index);
                } else {
                    row.removeClass("TopRow");
                    var rows = row.parent().find("tr");
                    var newPos = $(rows[row.data("prevIndex")]);
                    if (newPos > 0) {
                        row.insertAfter(newPos);
                    }
                }
             });
        });​

Answer 2

这是我的小提琴：我相信它适用于你想要的目的：

DEMO

即使在取消选中它们之前检查多行或全部行，这也可以正常工作。