JSFiddle - React, Tailwind, and code Playground

by id10922606

HTML

<table id="workflowviz">
<tr class="row">
    <td data-name="step1">0<span class="tick"></span></td>
<td data-name="stage: completed ">1</td>
<td data-name="stage: completed ">2</td>
<td data-name="stage: completed ">3</td>
<td data-name="stage: completed ">4</td>
<td data-name="stage: completed ">5</td>
</tr>
<tr class="row">
<td data-name="step2">0 <span class="tick"></span></td>
<td data-name="stage: completed">1</td>
<td data-name="stage: not completed">2</td>
<td data-name="stage: not completed">3</td>
<td data-name="stage: not completed">4</td>
<td data-name="Sub Stage: New ">5</td>
</tr>
</table>
<hr>
    <img class="img" src="foo.jpg" >
    <img class="img" src="foo1.jpg" >
    <img class="img" src="foo2.jpg" >

CSS

.green span{
    width:20px; height:20px; display:inline-block;
background-color:green;
}

JavaScript

//CHECK table each ROW
//Image src getAttribute

$(document).ready(function() {
     $("table tr").each(function() {
         if ($(this).find("td[data-name='stage: completed ']").length == 5)
             $(this).addClass("green")
     })
     
   //2
   
$(".img").click(function(){   
  //this.getAttribute('src'); // when using with jquery 
        x= $(this)[0].getAttribute('src');
         alert(x);
});
    
     
     
 });