Copying CSS to inline using jquery (or retaining formatting when copying stuff from a web page)

Question

I could probably muddle through the code for this, but before I do I thought I'd ask if there's a quick and/or built-in way or plugin for this...

Given a table with a css class applied to it, the class definition being in an external style sheet (with styles applied to th, tr, and td) I want to move OR copy that css to the style attribute of the tags themselves. In other words I want to make the CSS inline.

Reason: People who use these pages sometimes copy and paste the tables into emails. If they do this on a table with externally-sourced CSS the pasted table has lost all formatting. If the css is inline the formatting is retained.

I have already done this in a rough-and-ready way by simply applying duplicated css to the table using $().css(); function, but this is not ideal. If I ever changed the css in the style sheet I'd also have to change the CSS in this part on every single page that has this style of table

Something like $('.mytable').makeCSSInline(); would be an ideal function - if it existed :)

edit: Just for clarification: I don't think the copy/paste will retain the css if it's in an internal style sheet (copied using the .load function).. It has to be fully inline (in the style attribute of each tag that has a style associated with it).

Also, I'm copying from firefox to outlook (so from non-microsoft to microsoft)

Answer 1

This isn't exactly perfect but I think it's pretty close to what you're looking for.

(function($) {
    $.extend($.fn, {
        makeCssInline: function() {
            this.each(function(idx, el) {
                var style = el.style;
                var properties = [];
                for(var property in style) { 
                    if($(this).css(property)) {
                        properties.push(property + ':' + $(this).css(property));
                    }
                }
                this.style.cssText = properties.join(';');
                $(this).children().makeCssInline();
            });
        }
    });
}(jQuery));

Then you'd just call it with:

$('.selector').makeCssInline();