I presented my APEX jQuery Basics presentation at the UTOUG 2014 Fall Conference yesterday.  The participants requested that I make available the code used to "beautify" a classic report in the 2nd Demo.

Pre-Beautification: Demo 2a

Post-Beautification: Demo 2b

The Code:

 

$("td[headers='QUANTITY']").css("background-color","#EAEAEA");

$("td[headers='TOTAL_PRICE']").css("background-color","#D4FFBF")

$("td[headers='CATEGORY'] b:contains('Prod # Total:')")
   .text("")
   .closest("tr").find("td").css("background-color","#FFFFA3")
   .parent().find("td:nth-child(2)")
   .text(function(){
           return( 
             $(this).parent()
                    .prev()
                    .find("input.product_name").val()
                  + " subtotal:" ); 
         }
    )
   .css("font-weight","bold");


$("td[headers='CATEGORY'] b:contains('Category Total:')")
  .closest("tr").find("td")
  .css("background-color","#7BC5EA")
  .css("border-bottom-width","10px")
  .css("border-bottom-color","#000033")
  .parent().find("td:first")
  .text(function(){
          return(
            $(this).parent()
            .prev()
            .prev()
            .find("input.category").val()
          + " overall:" );
        } )
  .css("font-weight","bold");