jquery - Jqueryチェックされたテーブルの行が一番上に移動し、チェックされていない場合に戻ります

Question

私は JQuery プログラミングに非常に慣れていないため、JQuery エキスパートからの小さな恩恵が必要でした。テーブル行にピン留めできる機能が必要です。

シナリオ：

1. 行のチェックボックスをオンにすると、同じ行がテーブルの一番上に移動します。
2. チェックされている行のチェックを外すと、移動した場所と同じ場所に移動します。

jsfiddle デモ: http://jsfiddle.net/safkass/DhpBw/8/

Answer 1

ここに私のフィドルがあります:私はそれがあなたが望む目的のために働くと信じています:

デモ

これは、チェックを外す前に複数の行またはすべてをチェックした場合でも機能します。

Answer 2

いくつかのクリーンアップを使用できますが、これはうまくいくようです ( 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);
                    }
                }
             });
        });​