JSFiddle - React, Tailwind, and code Playground

by Mossa Barandao

HTML

<table id="sum_table" class="tbl" width="300" border="1">
<thead>
 <tr>
          <th style="background-color: #f5f5f5 !important;"></th>
            <th colspan="4">Monday 01/23</th>
            <th colspan="4">Tuesday 01/24</th>
            <th colspan="4">Wednesday 01/25</th>
            <th colspan="4">Thursday 01/26</th>
            <th colspan="4">Friday 01/27</th>
          <th colspan="4" align="center">Elig. Code</th><th colspan="4">Totals</th>
        </tr>
<tr>
          <th>Name</th>
            <th class="day">Attend</th>
              <th class="meal_type_1">B</th>
              <th class="meal_type_3">L</th>
              <th class="meal_type_4">S</th>
            <th class="day">Attend</th>
              <th class="meal_type_1">B</th>
              <th class="meal_type_3">L</th>
              <th class="meal_type_4">S</th>
            <th class="day">Attend</th>
              <th class="meal_type_1">B</th>
              <th class="meal_type_3">L</th>
              <th class="meal_type_4">S</th>
            <th class="day">Attend</th>
              <th class="meal_type_1">B</th>
              <th class="meal_type_3">L</th>
              <th class="meal_type_4">S</th>
            <th class="day">Attend</th>
              <th class="meal_type_1">B</th>
              <th class="meal_type_3">L</th>
              <th class="meal_type_4">S</th>
          <th class="day" colspan="4" align="center" style="background-color: #f5f5f5 !important;">Elig</th>
          <th id="bttl" class="meal_type">B_TTL</th>
          <th id="lttl" class="meal_type">L_TTL</th>
          <th id="sttl" class="meal_type">S_TTL</th>
        </tr>
</thead>
<tbody>
<tr class="meal_served tr-body">
        <td class="nowrap">carol f</td>
          <td class="day">P</td>
            <td class="meal_type ✔" style="background-color: green;" id="sizzle1485467845766">✔</td>
            <td class="meal_type -" style="background-color: #f5f5f5 !important;"></td>
            <td...

CSS

#sum_table {
 white-space: nowrap;   
}
#sum_table td {
 padding: 8px 8px;   
}

JavaScript

/*
    $(function(){
//get row and column indexes    
$(".tbl tr").click(function(e){
    alert("Row: "+(this.rowIndex)+", Column: "+(e.toElement.cellIndex));
});
});

*/
		$('.totalRow_B').css("background","lightblue");
    $('.totalRow_L').css("background","lightgrey");
    $('.totalRow_S').css("background","yellow");
    //$('td#rowAA_th').css("background","yellow");
    //$('td#rowAA_f').css("background","lightgrey");
    
  /*  
    $("[id*=rowAA]").text(function(i,t) {
        var n = parseInt( t, 10 ) || 0;
        
        $(this).nextAll(":last-child").text(function(a,o) {
          return  n + ( parseInt( o.replace(/[^\d]/g,""), 10 ) || 0 );
          
        });
        $(row).nextAll("#total").find("td:nth-child("+(++i)+")").text(function(a,o){
          var t = ( n + ( parseInt( o.replace(/[^\d]/g,""), 10 ) || 0 ) );
           $("[id*=total]").html("Total: "+ t.toString());
         });
         });
        
    
    $(function (){
    var rttl = 0;
     $("[id*=rowAA]").each(function(){
     rttl = rttl + parseFloat($(this).html());
     
     });
     alert(rttl);
     $("[id*=total]").html("Total: "+ rttl.toString());
    
    });
*/
$(".tbl thead th:contains('B')").not("[id*=lttl]").not("[id*=bttl]").not("[id*=sttl]").css("background", "red");
$(".tbl thead th:contains('L')").not("[id*=lttl]").not("[id*=bttl]").not("[id*=sttl]").css("background", "yellow");
$(".tbl thead th:contains('S')").not("[id*=lttl]").not("[id*=bttl]").not("[id*=sttl]").css("background", "purple");

    $("#sum_table tr").each(function(c, row){

    $('#sum_table tr').not(":first").each(function (r) {
       var rw1= $(".tbl thead th:contains('B')").filter(".tbl tbody td:contains('-')").not("[id*=lttl]").not("[id*=bttl]").not("[id*=sttl]").length;
       ///var rw2= $(".tbl thead th:contains('L') td:contains('✔')", row).not("[id*=lttl]").not("[id*=bttl]").not("[id*=sttl]").length;
      // var rw3= $(".tbl thead th:contains('S') td:contains('')",...