Color a cell based on content in list

Question

I am a JavaScript and SharePoint novice.

I would like to change the cell color based on contents using Client Side Rendering and JavaScript. I have had good luck with changing rows with you fine folks, but can't find a reference sheet to manipulating lists in SharePoint.

Can anyone recommend a good JavaScript book to help me learn what I need for manipulating SharePoint? Or even a reference library (online or dead-tree) for problems like this one?

Updated Code Used:

(function () { 
    var jan_field_name = document.querySelector('[displayname = "January"]').getAttribute('name');
    // Create object that have the context information about the field that we want to change it's output render  
    var priorityFiledContext = {}; 
    priorityFiledContext.Templates = {}; 
    priorityFiledContext.Templates.Fields = { 
        // Apply the new rendering for January field on List View 
        jan_field_name: { "View": priorityFiledTemplate } 
    }; 

    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(priorityFiledContext); 

})(); 

// This function provides the rendering logic for list view 
function priorityFiledTemplate(ctx) { 

    var priority = ctx.CurrentItem[ctx.CurrentFieldSchema.Name]; 

    // Return html element with appropriate color based on priority value 
    switch (priority) { 
        case "Implementation": 
            return "<span style='color :#C8E6C9'>" + priority + "</span>"; 
            break; 
        case "Planning": 
            return "<span style='color :#ff6a00'>" + priority + "</span>"; 
            break; 
        case "Critical": 
            return "<span style='color :#cab023'>" + priority + "</span>"; 
    } 
}

Update:

I realized after the comments I don't need to find any specific row or column. The reference string only occurs in the cells want shaded.

Screen Shot of an offending cell

The blue text is a mail reference and the white is the cell identifier. I used HTML to fake the coloring, but I want to automate the process for my users.

Ugh! Can't seem to attach the picture. Imagine three lines of text. The last line is what I am using as a reference string to render the cell. I just want to automate the process so my user's fill in that reference text and the cell turns a color.

FINAL CODE USED

function colorStatusCells() { 

// Create object that have the context information about the field that we want to change it's output render  
var janFieldContext = {}; 

janFieldContext.Templates = {}; 
janFieldContext.Templates.Fields = {"January_x0020_End_x0020_Status" : { "View": priorityFiledTemplate } }; 
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(janFieldContext); 

// Repeat the process for other fields
var febFieldContext = {};

febFieldContext.Templates = {}; 
febFieldContext.Templates.Fields = {"Feb_x0020_Full_x0020_Review" : { "View": priorityFiledTemplate } }; 
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(febFieldContext); 

var marFieldContext = {};

marFieldContext.Templates = {}; 
marFieldContext.Templates.Fields = {"Mar_x0020_End_x0020_Status" : { "View": priorityFiledTemplate } }; 
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(marFieldContext);

var aprFieldContext = {};

aprFieldContext.Templates = {}; 
aprFieldContext.Templates.Fields = {"Apr_x0020_End_x0020_Status" : { "View": priorityFiledTemplate } }; 
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(aprFieldContext);}; 

// This function provides the rendering logic for list view 

function priorityFiledTemplate(ctx) { 

var priority = ctx.CurrentItem[ctx.CurrentFieldSchema.Name]; 

// Return html element with appropriate color based on priority value 
switch (priority) { 
    case "Completed": 
        return "<div style='background-color: #4caf50; color: white; border: 0; margin: 0; padding: 0;'>" + priority + "</div>"; 
        break; 
    case "On Track": 
        return "<div style='background-color: #ff9800; color: white; border: 0; margin: 0; padding: 0;'>" + priority + "</div>"; 
        break; 
    case "Delay": 
        return "<div style='background-color: #ffeb3b; border: 0; margin: 0; padding: 0;'>" + priority + "</div>";
        break;
    case "Problem": 
        return "<div style='background-color: #F44336; color: white; border: 0; margin: 0; padding: 0;'>" + priority + "</div>"; 
        break;
    default:
        return "<div style='background-color: #bdbdbd; border: 0; margin: 0; padding: 0;'>" + priority + "</div>";
}  
} 
RegisterModuleInit(SPClientTemplates.Utility.ReplaceUrlTokens('~site/SiteAssets/Scripts/ColorCell05.js'), colorStatusCells);
colorStatusCells();

With the exception of having to look up the field names, this code works. Thanks all.

Answer 1

Using CSR you can change the look and feel of List Views. Below is a sample I copied from https://code.msdn.microsoft.com/office/Client-side-rendering-code-0a786cdd/sourcecode?fileId=109730&pathId=1836828232

(function () { 

    // Create object that have the context information about the field that we want to change it's output render  
    var priorityFiledContext = {}; 
    priorityFiledContext.Templates = {}; 
    priorityFiledContext.Templates.Fields = { 
        // Apply the new rendering for Priority field on List View 
        "Priority": { "View": priorityFiledTemplate } 
    }; 

    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(priorityFiledContext); 

})(); 

// This function provides the rendering logic for list view 
function priorityFiledTemplate(ctx) { 

    var priority = ctx.CurrentItem[ctx.CurrentFieldSchema.Name]; 

    // Return html element with appropriate color based on priority value 
    switch (priority) { 
        case "(1) High": 
            return "<span style='color :#f00'>" + priority + "</span>"; 
            break; 
        case "(2) Normal": 
            return "<span style='color :#ff6a00'>" + priority + "</span>"; 
            break; 
        case "(3) Low": 
            return "<span style='color :#cab023'>" + priority + "</span>"; 
    } 
} 

In this example the cell color of column Priority is changed. You can change this to your column. Then add logic on how the color will be decided. In the example the color is decided based on the value in the field.

For more CSR samples use - https://code.msdn.microsoft.com/office/Client-side-rendering-JS-2ed3538a

Javascript programming with SharePoint - http://www.amazon.in/Custom-SharePoint-Solutions-HTML-JavaScript/dp/1484205456