fletchzone.com

One of the things that you can pretty easily do with jQuery is manipulate the DOM and add and remove rows to/from a table...but what if you want to do this and take advantage of jQuery's animation capabilities?  What if you wanted a row to slide into view when you add it and perhaps fade out when you remove it?

I've done some research and came up with a plug-in that will do just that.  I've seen some cool ideas of how to do this where you wrap your table cell contents with div elements and animate the divs. That is essentially what this plug-in requires, but the difference is, I dynamically wrap the content, run the animation and then remove the divs.  This is required because being forced to wrap your content with divs becomes a bit of a pain and can become a performance issue when you want to do this with ASP.NET grids/tables which now with this plug-in is totally possible and pretty dang easy!

Below is the feature list:

Adding Rows

• Add row to top or bottom of table
• Pass in row to be added
• Set animation speed, defaults to 300

Removing Rows

• Remove row from top or bottom of table
• Set animation speed, defaults to 300

The Code

(function ($) {
    var defaults = {
        rowSpeed: 300,
        newRow: null,
        addTop: true,
        removeTop: true
    };
    var newClasses = "newRow"
    var options = $.extend(defaults, options);
    $.fn.addRow = function (options) {
        opts = $.extend(defaults, options);
        var $table = $(this);
        var $tableBody = $("tbody", $table);
        var t = $(opts.newRow).find("td").wrapInner("<div style='display:none;'/>").parent()
        if (opts.addTop) t.appendTo($tableBody);
        else t.prependTo($tableBody);
        t.attr("class", newClasses).removeAttr("id").show().find("td div").slideDown(options.rowSpeed, function () {
            $(this).each(function () {
                var $set = jQuery(this);
                $set.replaceWith($set.contents());
            }).end()
        })
        return false;
    };
    $.fn.removeRow = function (options) {
        opts = $.extend(defaults, options);
        var $table = $(this);
        var t
        if (opts.removeTop) t = $table.find('tbody tr:last')
        else t = $table.find('tbody tr:first');
        t.find("td")
        .wrapInner("<div  style='DISPLAY: block'/>")
        .parent().find("td div")
        .slideUp(opts.rowSpeed, function () {
            $(this).parent().parent().remove();
        });
        return false;
    };
    return this;
})(jQuery);

So what’s the deal?

So to use the plug-in, I’ve set up a few options.  Here’s what you can do with them:

In a future release, I plan to make it so that you can remove rows by passing in the selector.  This will be helpful in a case where you have highlighted several rows by selecting them and want to use this to delete the row.

Additionally, I was gonna make it so that you could pass in the row object to be added but then decided that being able to pass in the html tr markup allows for more control.

I hope you find this useful…

See the Demo

Click here to check out the demo.

Download

You can download the whole wad here:  anirows.zip

HTML jQuery, HTML, Table