gistfile1.js

// Function addClass
//
// Function adds a Class to each table row of the department
// report. Function supports the click deptRow that requires 
// a class to identify report rows and iFrame details.
//
// Function fires on page load AND after refresh
// (note binded events "ready apexafterrefresh")
// and adds a class to each row of the report. 
//
*/
$(document).live("ready apexafterrefresh","#repDept",function(){ 
  $('#repDept .uReportStandard > tBody> tr').addClass('deptRow')
})

/* ========================================================
// Function click deptRow
//
// Click function that fires on click of table row.
// The function controls the display of employee details
// whitin the department report.
// $(document).on("click",<element>,function(){...}) 
// notation ensures that 
// click function is still available after partial page 
// refresh of presentations region. 
//
*/

$(document).on("click",".deptRow",function(){ 
  // check if clicked row already displays presentation details 
  //(then we need to close them)
  // or not (then we need to display them). 
   if ( $(this).next().hasClass('deptRow') || $(this).is(":last-child") ){
      //get the deptno of the clicked row
      var deptNo = $(this).find('td[headers="DEPTNO"]').html()
      //create the url based on the global settings and the deptNo
      var url    =  'http://apex.oracle.com/pls/apex/' + $(this).find('td[headers="DET_LINK"] a').attr("href") + deptNo
      //create the iFrame 
      var frame  = '<iframe class="iframe" id="empFrame" src="'+url+'" height="250px" width="600px" frameborder ="0" scrollable="yes"/>'
      //we're going to wrap the iframe in a table row. First we check how wide the td has to be.
      var colSpan = $('.deptRow:nth-child(1) td').length
      var newRow = '<tr><td colspan="'+colSpan+'">'+frame+'</td></tr>'
      $(this).after(newRow)
  } else {
      $(this).next().remove()
  }
})