JS Change the Background Color of the Checkbox Selected Row

1.1 Problem description

Scenario description: When we enter data, sometimes we need to change the color of the entire row of data after selecting the check box widget with the mouse, as shown below:

1.2 Implementation ideas

We need to make sure that the CSS style of the selected widget changes when selecting the widget.

2.1 Open the report

Open the report %FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc-EN\Form\RowForm\Simple_Row-based_Form.cpt

Remove [Set background color of the row being edited] from the report, as shown below:

2.2 Modify the report

First, set the data column bound by A4 cell as a list, then right-click the cell to select widget Setting, Check Box widget for Type, click Event Edit, add [State Change] event, select [JavaScript script], add the parameter row in the parameter column, and select Formula for Value, which is row()-1.

Enter the following code in the JavaScript script bar:

if(this.getValue()){   
    $('tr[tridx='+row+']').css('background','#ff0000')   
}   
else{   
    $('tr[tridx='+row+']').css('background','#ffffff')  
}

As shown in the following diagram:

Note: If you want to change the font color, just change the 'background' in the code to 'color'.

2.3. Preview

After saving, click Data Entry Preview and click the button. The effect is shown below:

Note: In our testing, the mobile terminal and H5 do not support this effect.

Click Download Template:

JS change checkbox chosen line background color.cpt

https://help.fanruan.com/finereport/doc-view-1722.html