JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<body>

<table cellspacing="0" rules="all" border="1" style="border-collapse:collapse;">
			<tr><th>Name</th><th>SOP ABC</th></tr>
      
      <tr><td>Mary Coppen</td><td>Green10/5/18</td></tr>
      <tr><td>Arlana Mycroft</td><td>Green12/6/18</td></tr>
      <tr><td>Bob Litchfield</td><td>Yellow05/09/18</td></tr>
		</table>
    </body>
</html>

JavaScript

var tds = document.getElementsByTagName('td');
var Gimg = "<img src='https://via.placeholder.com/150' />";
var Yimg = "<img src='https://via.placeholder.com/150'/>";
for(var i=0; i < tds.length; i++) {
    const name = tds[i].innerHTML;
  if (name.includes('Green')) {
    tds[i].innerHTML = Gimg;
  }
  if (name.includes('Yello')) {
    tds[i].innerHTML = Yimg;
  }
}