JS Change the Background Color of a Clicked Row

1.1 Requirement

In the Preview mode, a large number of data will be displayed. How to highlight a table row on click?

1.2 Solution

Add a Loading End event to the template and set the color of a clicked table row to red 

2.1 Sample 1: Highlight a table row on click

2.1.1 Add an event

Click [Template] >[Web Attributes] >[Pagination Preview], check [Individually set for the template], and add a Loading End event, as shown in the figure below:

Input the following JavaScript codes:

contentPane.makeHighlight('red');

2.1.2 Preview

Save the template and click [Pagination Preview]. The preview effect on a PC is shown as below:

2.2 Sample 2: Highlight a table row on hover

2.2.1 Add an event

Click [Template] >[Web Attributes] >[Pagination Preview], check [Individually set for the template], and add a Loading End event, as shown in the figure below:

Input the following JavaScript codes:

contentPane.makeHighlight('red','mouseover');

2.2.2 Preview

Save the template and click [Pagination Preview]. The preview effect on a PC is shown as below:

Template for Sample 1

Mouseover.cpt

Template for Sample 1

Click.cpt