SharePoint list color row based on value

Login to your SharePoint online site and make a new Custom List. Click the gear on top right corner, click Add an app and then click Custom List , as below:

Making a new Custom list

Give list a name Status List, and click Create.

Adding Custom List

Your new Custom List is created, and its name is Status List . Click Status List.

Status List

After clicking you will be on the list page as below:

Status List Home

Look on the top ribbon, under List option click Settings and then again click List Settings as below:

List Settings

You will see the Settings page, click Create Column as below. Click it:

Create Column

After clicking you will see settings for creating the column as below. Input the fields, Column name as Status , type of information will be selected as Choice and type the options or choices you want in the list. Please see as below and then press Ok.

Creating Column

Now, your new column is created.

New Column Status

Click the list,

Click the List

Now, open another browser and type the link //www.jquery.com/download/ . On this page you will see jquery libraries, that you need to download and save in SharePoint Library. You can store this library in Site Assets. We will need this for writing jquery code to do the task. Now follow the snapshots:

Download Library

Save it on desktop temporarily, and then from your SharePoint Site Contents go to Site Assets and upload jquery-1.11.2.min in Site Assets as below:

Site Assets

Now go back to your list and go to Edit Page option. Click it:

Edit Page option

By editing the page, you will see the Web Part option page, click it as below:

Web Part

By clicking Web Part option, you will see a list of web parts that can be used here. Now select Media and Content and the Content Editor and click Add as below

Content Editor Web Part

Now you need to click inside the Content Editor so that you can see Edit Source option on the top ribbon. You need to click this Edit Source link. Please see as below:

Edit Source Option

After clicking it, a new window will open where you can write HTML Source Code, you need to delete what is written there and paste a new code that I will share with you in a while. First delete all the lines.

Clean the HTML Source Page

Now the delicate part comes, you need to paste the below code in this window:

=======START=========== [NOTE: DONT PASTE THIS, START FROM BELOW]

//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js

$[document].ready[function[]{

$Text = $[td .ms-vb2:contains[Approved]].filter[function[] {

return $[this].text[] == Approved;}]

$Text.parent[].css[background-color, #00FF66];

$Text = $[td .ms-vb2:contains[Decline]];

$Text.parent[].css[background-color, #FF0000];

}];

===========THE END========== [NOTE: DONT PASTE THIS, ONLY TILL ABOVE WHERE IT IS WRITTEN AS ]

Lines of Code Please change the path of the jquery library

You need to change the path in Line 1, where it is written//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js
type=text/javascript

You need to paste the address of the library where you have kept it, within SharePoint.

After pasting the code, click Add and it will take you back on the list page in Edit Mode as below.

Click Stop Editing.

Stop Editing

Now everything is done, lets try it. Input one record and put its Status as Approved and click Save .

Adding a record in Status List

Voila! you can see the color is Green. For any record whose Status is Approved will turn green. In this case I have Approved Sherlock Holmes leave request so its coming as green.

Sherlock Holmes on leave

Lets input few more records and see results.

Adding Records and seeing changing colors

In this way you can add colors to your rows, if you want different colors simply change the hexadecimal code of the color.

Reference://www.computerhope.com/htmcolor.htm

try this and do message me if you face any issue.

Best of Luck.