There is often a requirement to highlight the row that a mouse is currently hovering over if a table contains multiple rows of data. This is most often required when the rows contain links/anchors that can be clicked by the user.
The details below show the steps required to add this capability to a table of repeating data:
1) The first step is to add events that will be triggered as the mouse moves over the particular row. Go to the 'Field Details' tab within FormMaker and open up the 'Event Options' section for the Group which appears within the Repeat. The Group effectively defines the row of data for the table. Click on 'New Event' and select the option 'onmouseover' and 'Custom Script'. Within the text box cut and paste the following javascript:
dojo.addClass(dojo.byId(objEventSource.repeatId + objEventSource.value), "highlightBackground");
Please note this is using a predefined style in demo.css called 'highlightBackground'. You can change the stylename to your own style if required. You can achieve this by simply changing the style name highlighted in bold in the line of script above.
2) The second step is to add a second event that will be triggered as the mouse moves out of the particular row. Click on 'New Event' to add a second event and select the option 'onmouseout' and 'Custom Script'. Within the text box cut and paste the following javascript:
dojo.removeClass(dojo.byId(objEventSource.repeatId + objEventSource.value), "highlightBackground");
Please note that steps 1) and 2) must have the same style class name defined.
The details below show the steps required to add this capability to a table of repeating data:
1) The first step is to add events that will be triggered as the mouse moves over the particular row. Go to the 'Field Details' tab within FormMaker and open up the 'Event Options' section for the Group which appears within the Repeat. The Group effectively defines the row of data for the table. Click on 'New Event' and select the option 'onmouseover' and 'Custom Script'. Within the text box cut and paste the following javascript:
dojo.addClass(dojo.byId(objEventSource.repeatId + objEventSource.value), "highlightBackground");
Please note this is using a predefined style in demo.css called 'highlightBackground'. You can change the stylename to your own style if required. You can achieve this by simply changing the style name highlighted in bold in the line of script above.
2) The second step is to add a second event that will be triggered as the mouse moves out of the particular row. Click on 'New Event' to add a second event and select the option 'onmouseout' and 'Custom Script'. Within the text box cut and paste the following javascript:
dojo.removeClass(dojo.byId(objEventSource.repeatId + objEventSource.value), "highlightBackground");
Please note that steps 1) and 2) must have the same style class name defined.
RE: How to highlight a row within a repeat table on hover.
RE: How to highlight a row within a repeat table on hover.
<script>
$('td').filter('.firstRow').hover(
function () {
$(this).addClass('highlightBackground');
$(this).siblings().addClass('highlightBackground');
},
function () {
$(this).removeClass('highlightBackground');
$(this).siblings().removeClass('highlightBackground');
}
);
$('td').filter('.alternateRow').hover(
function () {
$(this).addClass('highlightRowBackground');
$(this).siblings().addClass('highlightBackground');
},
function () {
$(this).removeClass('highlightBackground');
$(this).siblings().removeClass('highlightBackground');
}
);
</script>
RE: How to highlight a row within a repeat table on hover.
Add an 'onmouseover' trigger to add the class 'highlightRowBackground' to the group inside the 'repeat'.
Add an 'onmouseout' to remove the class.