代码之家  ›  专栏  ›  技术社区  ›  Mohamad

如何使用jquery向表行添加转换效果

  •  2
  • Mohamad  · 技术社区  · 15 年前

    // Move item to top or up/down by one
    $(".top,.up,.down").click(function(){
    
        // This row
        var row = $(this).parents("tr:first");
    
        // When up is pressed
        if ($(this).is(".up")) { row.insertBefore(row.prev()); }
    
        // When top is pressed
        else if ($(this).is(".top")) { var firstRow = row.parent().find("tr:first").not(row); row.insertBefore(firstRow); }
    
        // When down is pressed
        else { row.insertAfter(row.next()); }
    
    2 回复  |  直到 15 年前
        1
  •  2
  •   FatherStorm    15 年前

    在jquery中,您可以将操作链接在一起…看 here 对于jquery中链接的tut

    $(".top,.up,.down").click(function(){
    
            // This row
            var row = $(this).parents("tr:first");
    
            // When up is pressed
            if ($(this).is(".up")) { row.fadeOut().insertBefore(row.prev()).fadeIn(); }
    
            // When top is pressed
            else if ($(this).is(".top")) { 
                        var firstRow = row.parent().find("tr:first").not(row); 
                        row.fadeOut().insertBefore(firstRow).fadeIn();
                    }
    
            // When down is pressed
            else { row.fadeOut().insertAfter(row.next()).fadeIn(); }
    
        2
  •  1
  •   justkt    15 年前

    使用 .fadeOut() 和 .fadeIn() 像这样:

    // Move item to top or up/down by one
    $(".top,.up,.down").click(function(){
    
        // This row
        var row = $(this).parents("tr:first");
    
        // When up is pressed
        if ($(this).is(".up")) { row.fadeOut('slow'); row.insertBefore(row.prev()); row.fadeIn('slow'); }
    
        // When top is pressed
        else if ($(this).is(".top")) { var firstRow = row.parent().find("tr:first").not(row); row.fadeOut('slow'); row.insertBefore(firstRow); row.fadeIn('slow');  }
    
        // When down is pressed
        else { row.fadeOut('slow'); row.insertAfter(row.next()); row.fadeIn('slow'); }
    });