SharePoint List items with different color depending on approval status using JavaScript and Script Editor web part

Output will look like this

1. Create SharePoint List named “Review List”

2. Go to setting and rename title column as Name and create columns as shown in below table

sr no	Column Name	Column Type	Description
1	Product Name	Single Line of text	Renamed Title column
2	Employee Name	Single Line of text
3	Approval Status	Choice (menu to choose from)	Pending, Approved, Rejected (by default Pending)
4	Comment	Multiple lines of text	For comment

3. Edit the list by using Gear icon on Top Right side

4. Click on Insert button on Top Left side then select Media and Content, then click on Script Editor and click Add button on right

5. Click on edit snippet

6. Paste below code and click insert and the stop editing the page

<style>

.foo {

float: left;

width: 20px;

height: 20px;

margin: 5px;

border: 1px solid rgba(0, 0, 0, .2);

}

.Pending {

background: #EAC117;

}

.Approved{

background: #01DF3A;

}

.Rejected{

background: #F90101;

}

</style>

<table>

<tr><td><div class="foo Pending"></div><td><td>- Pending <td>

<td><div class="foo Approved"></div><td><td>- Approved<td>

<td><div class="foo Rejected"></div><td><td>- Rejects<td></tr>

</table>

</div>

$(document).ready(function () {

$Text = $("td.ms-cellstyle.ms-vb2:contains('Approved')");

$Text.parent().css("background-color", "#01DF3A");

$Text = $("td.ms-cellstyle.ms-vb2:contains('Rejected')");

$Text.parent().css("background-color", "#F90101");

$Text = $("td.ms-cellstyle.ms-vb2:contains('Pending')");

$Text.parent().css("background-color", "#EAC117");

});

</script>

7. Congratulations you done with programming