Databases Reference
In-Depth Information
Figure 7-36.
Table HTML
The highlight-row class can be used to add a CSS style to highlight the row when you hover over it.
The CSS style is
/* Using the DEPT EMP REPORT id ensures that this highlighting will only affect the
Department Employees report */
#DEPT EMP REPORT .highlight-row:hover > td {
background-color: yellow;
}
Normally you would include this in a CSS file and store it on a web server which would be
referenced in the HTML header. For the purpose of this example, inline CSS will be “injected” into the
application using a Dynamic Action.
1.
Create a new Dynamic Action, using the advanced wizard, called On Page
Load. This dynamic action will be used for actions that need to only be
executed when the page loads.
2.
Set the event to Page Load with no condition and click the Next button to
continue.
3.
Use Execute JavaScript Code and enter the code below into the Code section.
This code will put the inline style sheet after the affected element defined in
the next step.
//This code will prepent the affected element(s) with the inline CSS HTML code.
$(this.affectedElements).prepend(
'<style type="text/css"><!-- #DEPT EMP REPORT .highlight-row:hover > td
{background-color: yellow;}//--></style>'
);
4.
You can define where the inline CSS will get prepended to in the affected
elements section. Select Region as the selection type and Department
Employees as the region. This means that APEX will insert the above HTML
code before the Department Employees region. Click the Create button.
If you refresh the page and hover over each row you should notice that the current row is
highlighted yellow. You can change the color by modifying the value in the style tag that was added.
