Home » OrclApex » Oracle Apex: Highlight Row on Link Click of Interactive Report

Oracle Apex: Highlight Row on Link Click of Interactive Report

This Oracle Apex tutorial shows you how to highlight a row on the link click of the interactive report.

Oracle Apex version 19.1 is used to demonstrate this example.

1. Create a JavaScript function.

Add the following JavaScript code to the page having Interactive Report. Click on the Page then in the property palette, JavaScript > Function and Global Variable Declaration. Paste the following JavaScript function code in Function and Global Variable Declaration section:

function irRowhighLight( pThis ){
  $('td').removeClass('currentrow');
  $(pThis).parent().parent().children().addClass('currentrow') ;  
  var v_row = $(pThis).parent().next().html();
}

2. Add the CSS to the page.

Click on the Page then in the property palette, CSS > Inline. Paste the following CSS code in the Inline section:

.currentrow
{ 
 background-color: #eeeeee !important;
}

3. Set Link Attribute for the Link.

Now select the column and set the type to Link. In the property palette, set the target for the link in the Link section and for the Link Attribute property, add the following code:

onclick=irRowhighLight(this);

It is done now. Save the changes and run the report to test. When you will click on the link the current row of the interactive report will be highlighted.

See also: