0

ボタンがクリックされた後、テーブルから行を切り離したい。ただし、元の場所に追加することはできません。「削除」ボタンが属する行を切り離すために、以下のコードになりました。

$(".removeTR").live('click', function (event) {
$(this).closest('tr').fadeTo(400, 0, function () {
    $(this).detach();
});
return false;
});

複数の行を切り離し、それらすべてを「リセット」ボタンで追加する必要がある場合、問題はさらに複雑になります。何か提案をしたり、適切なロジックに誘導したりできますか?

4

2 に答える 2

2

ノードのインデックスをlike内に保存できます<table>

$(this).closest('tr').fadeTo(400, 0, function () {
    var $this = $( this );

    $this
        .data( 'index', $this.index() )
        .detach();
});

..そして後で、次のように再挿入します

$( 'table tr' ).eq( $noderef.data( 'index' ).after( $noderef );

保存されたインデックスは静的な値になることに注意してください。つまり、その間に追加または削除された行がある場合は、この時点で、その行があったインデックスに再挿入するだけです。

于 2013-01-23T17:20:50.603 に答える
0

show() と hide() を利用して、思い通りに動作させることができました。これでポジショニングを気にする必要がなくなりました。ただし、膨大な数のテーブル行を処理するときのパフォーマンスに懸念があります。

var trItems = $("table tr").length;
$(".resetALL").hide();

$(".removeTR").live('click', function (event) {
    $(".resetALL").fadeIn("slow");
    $(this).closest('tr').fadeOut("normal");
    var trHidden = $("table tr:hidden").length+1;
    var trRemains = trItems - trHidden;
    if (trRemains <= 3) {
        $("span").text("You must have at least " + (trRemains-1) + " products in the comparison table.");
        $(".removeTR").fadeOut("normal");
    }
});

$(".resetALL").live('click', function (event) {
    $("table tr:hidden").fadeIn("slow");
    var trItems = $("table tr").length;
    $(".removeTR").fadeIn("slow");
    $("span").text("This is the span.");
    $(".resetALL").fadeOut("normal");
});

以下の私の作業例を見ることができます: http://jsfiddle.net/YCdGQ/51/

于 2013-01-24T14:55:34.203 に答える