For the classic list view in SharePoint Online, we can use Client Side Rendering to render list view.
A demo - Use the following script to the page to render “Status” column:
<script src="https://code.jquery.com/jquery-1.11.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
(function () {
var overrideNameField = {};
overrideNameField.Templates = {};
// This action will edit the “Status” field. You can change the “Status” to another custom column.
overrideNameField.Templates.Fields = {
"Status": { "View": overrideNameFieldTemplate }
};
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideNameField);
})();
function overrideNameFieldTemplate(ctx) {
//get the column value.
var currentVal = ctx.CurrentItem["Status"];
// Render the column
switch (currentVal) {
case "Ongoing":
return "<div style='background-color :#00ff00'>" + currentVal + "</div>";
break;
case "Scheduled":
return "<div style='background :#ffa500'>" + currentVal + "</div>";
break;
case "Completed":
return "<div style='background :#ff0000'>" + currentVal + "</div>";
}
}
</script>
Information about Client Side Rendering
For the modern list view in SharePoint Online, we can use JSON to render the column.
A demo - Format the "Status" column using the following JSON:
{
"elmType": "div",
"txtContent": "@currentField",
"style": {
"background-color": {
"operator": "?",
"operands": [
{
"operator": "==",
"operands": [
"@currentField",
"Completed"
]
},
"#ff0000",
{
"operator": "?",
"operands": [
{
"operator": "==",
"operands": [
"@currentField",
"Ongoing"
]
},
"#00ff00",
{
"operator": "?",
"operands": [
{
"operator": "==",
"operands": [
"@currentField",
"Scheduled"
]
},
"#FFA500 ",
""
]
}
]
}
]
}
}
}
Learn more about using column formatting to customize SharePoint