working jqGrid Example

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css">
<link rel="stylesheet" href="http://trirand.com/blog/jqgrid/themes/ui.jqgrid.css">
<script src="http://trirand.com/blog/jqgrid/js/i18n/grid.locale-en.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/jquery.jqGrid.src.js"></script>
<table id="rowed5"></table>

CSS

<style type="text/css">
        span.cellWithoutBackground
        {
            display:block;
            background-image:none;
                           }
                    </style>

JavaScript

var lastsel2
var mydata=[
{id:"1",Error_Cells_Count:"1",status:"",note:"",color_name:"PRUPLE",character_name:"Character 1",v_id:"123456"},
{id:"2",Error_Cells_Count:"1",status:"",note:"",color_name:"PURPLE",character_name:"Character  1",v_id:"234567"},
{id:"3",Error_Cells_Count:"2",status:"",note:"",color_name:"Pink",character_name:"character 3",v_id:"345678"},
{id:"4",Error_Cells_Count:"0",status:"",note:"",color_name:"GREEN",character_name:"Character 2",v_id:"456789"}
];
jQuery("#rowed5").jqGrid({
    
    datatype: "local",
    shrinkToFit: false,
    data: mydata,
    height: 320,
    autowidth:true,
    colNames:['RowID','Error_Cells_Count','status','note','color_name','character_name','Variant ID'],
    colModel:[ 
        {name:'id',index:'id', width:55, sorttype:"int",align:"center",frozen:true},
        {name:'Error_Cells_Count',index:'Error_Cells_Count', width:100, sorttype:"int",align:"center",frozen:true,formatter:error_cells_color},
        {name:'status',index:'status', width:100,align:"left", editable: true,
edittype:"select",editoptions:{value:"Approve:Approve"}},
        {name:'note',index:'note', width:100, sortable:false,editable: true,edittype:"textarea", editoptions:{rows:"2",cols:"10"}},
        {name:'color_name',index:'color_name', width:110,align:"left"},{name:'character_name',index:'color_name', width:110,align:"left"},{name:'v_id',index:'v_id', width:110,align:"left"}],
    loadComplete:function ()
{
    var rows = $("#rowed5").getDataIDs(); 
    for (var i = 0; i < rows.length; i++)
    {
        var colorcell = $("#rowed5").getCell(rows[i],"color_name");
		var cahractercell = $("#rowed5").getCell(rows[i],"character_name");
		var hilightcolorcell=["PURPLE","PINK","GREEN"];
    var hilightcahractercell=["Character 1","Character 2","Character 3"];
		
        if(hilightcolorcell.includes(colorcell))
        {
        
       ...