JSFiddle - React, Tailwind, and code Playground

by TheDiamondDoge

HTML

<table>
  <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>
      <img/>
      <input type="number" />
    </td>
    <td>
      <input type="number" value="5" />
      <img/>
    </td>
    <td>
      <input type="number" value="0" />
      <img/>
    </td>
    <td>
      <input type="number" />
      <img/>
    </td>
    <td>

    </td>
    <td>

    </td>
    <td>

    </td>
    <td>

    </td>
    <td>

    </td>
    <td>

    </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" />
      <img/>
    </td>
    <td id="here"><input type='text'></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td height=5 0px>Sales</td>
    <td>csl</td>
    <td>15.05.2018</td>
    <td><input type="number" />
    <img/></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>
<button>
Click
</button>

CSS

table td {
  border: 1px solid black;
  text-align: center;
}

td {
  padding: 7px;
  height: 50px;
}

img {
  width: 50px;
  height: 50px;
}

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;
  }

}