JSFiddle - React, Tailwind, and code Playground

by RoryMcCrossan

HTML

<table id="workflowviz">
    <tr class="row">
        <td data-name="step1">0</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</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>

CSS

.green {
    background-color: #0C0;
}

JavaScript

$('#workflowviz tr').each(function () {
    var $tr = $(this);
    var $tds = $tr.find('td').filter(function () {
        return $(this).data('name') == 'stage: completed ';
    });
    if ($tds.length == 5) {
        $tr.addClass('green');
    }
});