JSFiddle - React, Tailwind, and code Playground

by Nazarii Iaremii

HTML

<br />
<br />
<br />
<br />
<table border="1" style="width:100%; text-align:center;" class="ui-jqgrid-ftable">
    <tr>
        <th>
            EndUsers 
        </th>
        <th>
            Decretusers
        </th>
        <th>
            Adminusers
        </th>
    </tr>
   <tr>
       <td aria-describedby="Raport1Grid_endusers">
           3
       </td>
       <td aria-describedby="Raport1Grid_decretusers">
           0
       </td>
       <td aria-describedby="Raport1Grid_adminusers">
           8
       </td>
    </tr>
</table>

CSS

.selecteClass {
    background-color: rgb(75, 108, 158);
    color: white;
    font-size: 30px;
}

JavaScript

//Simulation of footer data by creating this table 

//Raport1Grid - name of my jqgrid
//endusers, adminusers,decretusers - name of my rows in colModel
//Raport1Grid_endusers - GridName_ColumnName

var endUsers = $("[aria-describedby='Raport1Grid_endusers']").click(function(){
    //Change style of selectedCell 
    $('.ui-jqgrid-ftable').find('.selecteClass').removeClass('selecteClass');
    $(endUsers).addClass('selecteClass');    
});

var decretUsers = $("[aria-describedby='Raport1Grid_decretusers']").click(function(){
    $('.ui-jqgrid-ftable').find('.selecteClass').removeClass('selecteClass');
    $(decretUsers).addClass('selecteClass'); 
    
    //Get values from selected Cell
    var qwer = $("[aria-describedby='Raport1Grid_decretusers']").text();
    alert(qwer);
});

var adminUsers = $("[aria-describedby='Raport1Grid_adminusers']").click(function(){
    $('.ui-jqgrid-ftable').find('.selecteClass').removeClass('selecteClass');
    $(adminUsers).addClass('selecteClass');       
});