JSFiddle - React, Tailwind, and code Playground

by Mike Rawling

HTML

<table class="vis-heatmap">
<thead><tr>
    <th scope="row"><span class="h">Data source</span></th>
<th>Emo 1</th>
<th>Emo 2</th>
<th>Emo 3</th>
<th>Emo 4</th>
<th>Emo 5</th>
<th>Emo 6</th>
</tr></thead>

<tbody>
<tr>
<td scope="row">v(1) nr</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td></td>
<td>4</td>
</tr>
<tr>
<td scope="row">v(1) t</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>8</td>
<td>8</td>
</tr>
<tr>
<td scope="row">v(2) nr</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>12</td>
<td>12</td>
</tr>
</tbody></table>
    
    
<br /><br /><br /><br />

<button id="pause" class="h">testing testing, one two, one two</button>
<!--
<div class="sharerank-heatmap"><div id="placeholder_945930d9-a540-4bcf-be3f-47bba1cfe0f6" class="" style="opacity: 1;"><table id="confirmit_agg_table_5" class="t5_table Table">
  <thead>
    <tr class="t5_tr TableRow">
      <td class="t5_cc">
      </td><td class="t5_chc">Intense</td>
      <td class="t5_chc">Intense</td>
      <td class="t5_chc">Intense</td>
      <td class="t5_chc">Intense</td>
      <td class="t5_chc">Intense</td>
      <td class="t5_chc">Intense</td>
      <td class="t5_chc">Intense</td>
      <td class="t5_chc">Intense</td>
      <td class="t5_chc">Intense</td>
    </tr>
  </thead>
  <tbody>
    <tr class="t5_tr TableRow">
      <td class="t5_rhc">Betrayal</td>
      <td class="t5_dc TableDataCell">15%</td>
      <td class="t5_dc TableDataCell">0%</td>
      <td class="t5_dc TableDataCell">35%</td>
      <td class="t5_dc TableDataCell">21%</td>
      <td class="t5_dc TableDataCell">17%</td>
      <td class="t5_dc TableDataCell">30%</td>
      <td class="t5_dc TableDataCell">14%</td>
      <td class="t5_dc TableDataCell">14%</td>
      <td class="t5_dc TableDataCell">54%</td>
    </tr>
    <tr class="t5_tr TableRow">
      <td class="t5_rhc">Panda</td>
      <td class="t5_dc TableDataCell">25%</td>
      <td class="t5_dc TableDataCell">14%</td>
      <td class="t5_dc...

CSS

/* utils */

.hide,
.h{
    display:none;
}

/* main */
body{
    font-family:"Trebuchet MS";
}
table.vis-heatmap{
    width:100%
    border-collapse: collapse;
}

table.vis-heatmap th,
table.vis-heatmap td{
border:1px solid #fff;
    text-align:center;
    padding:10px;
}
table.vis-heatmap thead tr{
    height:60px;
}
table.vis-heatmap thead,
table.vis-heatmap td[scope=row]{
    font-weight:bold;
}

table.vis-heatmap th[scope=row]{
    width:100px;
}

table.vis-heatmap tbody td{
    width:60px;
    height:60px;
    /* color:#fff !important; */
}

table.vis-heatmap td:not([scope=row]),
table.vis-heatmap td.lowest{ /* 1,2 */
    color:#d6f6ff;
    background-color:#d6f6ff;
}

table.vis-heatmap td.highest{ /* 11,12 */
    color:#195c9c;
    background-color:#195c9c;
}

table.vis-heatmap td.higher{/* 9,10 */
    color:#4792bf;
    background-color:#4792bf;
}
table.vis-heatmap td.high{/* 7,8 */
    color:#5da6cf;
    background-color:#5da6cf;
}

table.vis-heatmap td.low{/* 5,6 */
    color:#79c6e1;
    background-color:#79c6e1;
}

table.vis-heatmap td.lower{/* 3,4 */
    color:#94cedf;
    background-color:#94cedf;
}

JavaScript

$('#pause').on('click', function () {
    //debugger;
    //$(this).text('clicked');
    alert($(this).text());
});
/* 
$('.vis-heatmap tbody td').on('click', function () {
    ///debugger;
    //'clicked');
    var bob = $(this).text();
    alert(bob);
});
*/
// testing selector and etc
// $('table.vis-heatmap tbody td').addClass("bob").css("border","1px dotted #222121");

    $('table.vis-heatmap tbody td:not([scope=row])').each(function() {
        var myCellData = $(this).text();
        if(myCellData == 1 || myCellData == 2){
            $(this).addClass("lowest");
        }else if(myCellData <= 4){
            $(this).addClass("lower");
        }else if(myCellData <= 6){
            $(this).addClass("low");
        }else if(myCellData <= 8){
            $(this).addClass("high");
        }else if(myCellData <= 10){
            $(this).addClass("higher");
        }else if(myCellData <= 12){
            $(this).addClass("highest");
        }else if(myCellData == 0 || myCellData == '' || myCellData == NaN){
            $(this).css("color","#ffffff").css("background-color","#ffffff");
        }
        //$(this).text("");
        $(this).on('click', function () {
            ///debugger;
            //'clicked');
            //var bob = $(this).text();
            alert(myCellData);
        });
    });