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");