0

单击按钮后，我想从表中分离一行。但是，我无法设法将其附加回原来的位置。我最终使用下面的代码来分离“删除”按钮所属的行：

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

当我需要分离多行然后使用“重置”按钮将它们全部附加时，问题会变得更加复杂。您能否提出任何建议或指导我正确的逻辑？

4

2 回答 2

2

您可以将节点的索引存储在类似<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 回答