JSFiddle - React, Tailwind, and code Playground

by Mossa Barandao

HTML

<table class="table">
  <!--  <thead>
        <tr>
            <th>B</th>
            <th>L</th>
            <th>S</th>
            <th>elig</th>
        </tr>
    </thead> -->
  <thead>

    <!--  <tr><td class="noScreen" style="border-right:0px; border-top:0px;border-left:0px" colspan="40">
        <div style="float:left">
        Week of: January 23rd, 2017</div>
          <div style="float:right"> Classroom: Toddlers</div></td>
      </tr> -->
    <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">
        B
      </th>
      <th class="meal_type">
        L
      </th>
      <th class="meal_type">
        S
      </th>
      <th class="day">Attend</th>
      <th class="meal_type">
        B
      </th>
      <th class="meal_type">
        L
      </th>
      <th class="meal_type">
        S
      </th>
      <th class="day">Attend</th>
      <th class="meal_type">
        Boss
      </th>
      <th class="meal_type">
        L
      </th>
      <th class="meal_type">
        S
      </th>
      <th class="day">Attend</th>
      <th class="meal_type">
        B
      </th>
      <th class="meal_type">
        L
      </th>
      <th class="meal_type">
        S
      </th>
      <th class="day">Attend</th>
      <th class="meal_type">
        B
      </th>
      <th class="meal_type">
        L
      </th>
      <th class="meal_type">
        S
      </th>
      <th colspan="4" style="background-color: #f5f5f5 !important;"></th>
      <th>B</th>
      <th>L</th>
      <th>S</th>
      <!-- <th>P/A</th> -->
    </tr>
  </thead>
  <tbody class="wkly_report">
...

CSS

.hover {
  background-color: red;
}

JavaScript

//xcount
/*
var xindex = '';
var r1 = "tr:eq(1)";
var r2 = "tr:eq(2)";
*/

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

$("tbody").find("tr").each(function() { //get all rows in table

  var ratingTdText = $(this).find('td.child_b_ttl').text();
  //gets the text out of the rating td for this row
  alert(ratingTdText);

});

$(".table thead th:contains('B')").not("th:last").each(function() {


  //var index = $(".table thead th:eq(1):contains('B')").not("th:last").index() + 1;
  // $('.table tbody td:nth-child(' + index + ')').addClass('hover');

  var rw1 = $("tr:eq(2) td:contains('✔')").length; //css("background","red");
  //var rw2= $("tr:eq(3) td:contains('✔')").length;//css("background","red");
  //var rw3= $("tr:eq(4) td:contains('✔')").length;//css("background","red");

  $(".x").html("B: " + rw1);
  //$(".y").html("B: "+rw2);
  //$(".z").html("B: "+rw3);

});
/*
       var index = $(".table thead th:contains('B') ").index()+1;
        var bindex = $('.table tbody td:nth-child(' + index + ')').css("background","red");
         //alert(bindex);
       // --
     */
var lindex = $(".table thead th:contains('L') ").index() + 1;
var lindex_1 = $('.table tbody td:nth-child(' + lindex + ')').css("background", "yellow");
// alert(lindex);
//--

var index = $(".table thead th:contains('S') ").index() + 1;
var sindex = $('.table tbody td:nth-child(' + index + ')').css("background", "lightgrey");
alert(index);






//$(".table thead th:contains('B') tr").not("th:last").css("background","red");
/*      
var xcells = $(".table tbody td:nth-child(" + xindex + ")");
var xCount = xcells.filter(":contains('OK')").length;

//ycount
var yindex = $(".table thead th:contains('L')").index() + 1;
var ycells = $(".table tbody td:nth-child(" + yindex + ")");
var yCount = ycells.filter(":contains('OK')").length;

//zcount
var zindex = $(".table thead...