JSFiddle - React, Tailwind, and code Playground

by TheDiamondDoge

HTML

<table id = "indicatorsOr">
  <tr>
    <td rowspan=2 height=7 5px>Role</td>
    <td rowspan=2>Who</td>
    <td rowspan=2>Updated On</td>
    <td rowspan=2>Opportunity <br/>Review</td>
    <td rowspan=2>Charter</td>
    <td rowspan=2>PMP</td>
    <td rowspan=2>Tailoring</td>
    <td colspan=2>Accountability</td>
    <td colspan=2>Business Plan</td>
    <td colspan=2>Launch Plan</td>
    <td rowspan=2>Lessons <br/>&amp; Learns</td>
    <td rowspan=2>Comments</td>
  </tr>
  <tr>
    <td>PM</td>
    <td>PCT</td>
    <td>Plan</td>
    <td>Sales <br/>Buy-in</td>
    <td>Plan</td>
    <td>Sales <br/>Buy-in</td>
  </tr>
  <tr>
    <td>Program Manager</td>
    <td>aiksanov</td>
    <td>15.05.2018</td>
    <td>
      <input type="number" value="10" />
      <img/>
    </td>
    <td>
      <input type="number" value="10" />
      <img/>
    </td>
    <td>
      <input type="number" value="5" />
      <img/>
    </td>
    <td>
      <input type="number" value="10" />
      <img/>
    </td>
    <td>
      <input type="number" value="10" />
      <img/>
    </td>
    <td>
<input type="number" value="10" />
      <img/>
    </td>
    <td>
<input type="number" value="10" />
      <img/>
    </td>
    <td>
<input type="number" value="10" />
      <img/>
    </td>
    <td>
<input type="number" value="10" />
      <img/>
    </td>
    <td>
<input type="number" value="10" />
      <img/>
    </td>
    <td>
<input type="number" value="10" />
      <img/>
    </td>
    <td>
    
    </td>
    <td>
      <button id="edit">Edit</button>
      <button id="save">Save</button>
      <button id="cancel">Cancel</button>
    </td>
  </tr>
  <tr>
    <td height=5 0px>PMO - Quality</td>
    <td>csl</td>
    <td>15.05.2018</td>
    <td>
      <input type="number" value="10" />
      <img/>
    </td>
    <td>
<input type="number" value="10" />
      <img/>
</td>
    <td>
      <input type="number" value="10" />
      <img/>
    </td>
    <td>
      <input type="number" value="10" />
      <img/>
...

CSS

table#indicatorsOr td{
  border: 1px solid black;
  text-align: center;
  padding: 7px;
  height: 50px;
}

table#indicatorsOr img {
  width: 50px;
  height: 50px;
}

table#indicatorsOr input {
  display: none;
  width: 50px;
}

JavaScript

var green = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT-y2pDJfDRIQQymF9rQce0kMBYnLzFoOiBCtcUgddhrey_wrny";

var yellow = "https://upload.wikimedia.org/wikipedia/commons/thumb/9/97/Emblem-important-yellow.svg/120px-Emblem-important-yellow.svg.png";

var red = "https://upload.wikimedia.org/wikipedia/commons/thumb/4/4a/Circle-icons-flame.svg/512px-Circle-icons-flame.svg.png";

$(function() {
  setColorIcon();
  $("button#edit").on('click', function() {
    $("input, img").toggle();
  });
  $('button#save').on('click', function() {
    setColorIcon();
    $("input, img").toggle();
  });

});

function setColorIcon() {
  $("input").each(function() {
    $(this).siblings().eq(0).attr("src", getColor($(this).val()));
  });
}


function getColor(value) {
  if (value >= 8) {
    return green;
  } else if (value >= 5 & value < 8) {
    return yellow;
  } else if (value < 5) {
    return red;
  }

}