<style type="text/css" media="print"> and jQuery?

Question

Hi,

I have a site where the HTML is just a mess (generated by SharePoint designer).

I need to print the the page, but it looks like crap in IE7/8 print preview, so I need to use <style type="text/css" media="print"> to alter some tables, divs etc, but a lot of the elements have no class or ID. Is there a way to use the print stylesheet and jQuery together to find elements? When I search on Google, most of the links are about switching stylesheets.

Thanks in advance.

Answer 1

You could use jQuery's powerful selectors to actually ADD classes that you might need, which will then be accessible from your print stylesheet.

For example.

$("p:last-child").addClass("last-para");
$("tr:odd").addClass("odd-row");
$("table:eq(5)").addClass("table6"); // 6th table, starting from a 0 index!

Just for fun, here's some jQuery magic that will add a class (numbered) to all your tables AND all your rows within a table.

$("table").each(function(index, value) {
    $(this).addClass("table" + index);
    $("tr", this).each(function(index, value) {
        $(this).addClass("row" + index);
    });
});

If you need help with specifying particular elements, post them in your question and we'd be happy to help.