Q:

Custom Lists - set row background color in a list depending on a column value

Starting from this example:
https://code.msdn.microsoft.com/office/Client-side-rendering-code-0a786cdd
I would like to set the entire row background color depending on a column value. 

A:

Below example demonstrates how to customize List View in order to highlight list item rows.  
Assume there is a Tasks list and depending on status, rows have to be highlighted using the corresponding color.     
Template code:
SP.SOD.executeFunc("clienttemplates.js", "SPClientTemplates", function() {

   SPClientTemplates. TemplateManager. RegisterTemplateOverrides({
     OnPostRender: function(ctx) {

       var statusColors =  {
          'Not Started' : '#FFF1AD',  
          'In Progress' : '#FFD800',
          'Completed' : '#01DF3A' 
       };

       var rows = ctx. ListData. Row;
       for (var i=0;i<rows.length;i++)
       {
          var status = rows[i]["Status"];
          var rowId = GenerateIIDForListItem(ctx, rows[i]);
          var row = document.getElementById(rowId); 
          row.style.backgroundColor = statusColors[status];
       }
     }
   }); 

});

How to apply the changes
There are at least two options how to apply the changes:

Using JSLink property
Place JavaScript template on page via Script Editor/Content Editor
web parts

Here is how to apply the changes using the second option:

Switch the page into edit mode
Add Script Editor webpart right below the list view web part. 
Put the specified code by wrapping it using script tag code into the Script Editor, for example: <script type="text/javascript">{Template JS code goes here}</script>
Save the page

Results

