JSFiddle - React, Tailwind, and code Playground

by Firdaus Zailani

HTML

<table class="styleTable">
    <tr class="trStyle">
        <td>Info1</td>
        <td class="tdStyle">Yes</td>
        <td class="tdStyle">No</td>
        <td class="tdStyle">Yes</td>
        <td class="tdStyle">Yes</td>
    </tr>
    <tr class="trStyle">
        <td>Info2</td>
        <td class="tdStyle">Yes</td>
        <td class="tdStyle">Yes</td>
        <td class="tdStyle">No</td>
        <td class="tdStyle">Yes</td>
    </tr>
    <tr class="trStyle">
        <td>Info3</td>
        <td class="tdStyle">Yes</td>
        <td class="tdStyle">No</td>
        <td class="tdStyle">Yes</td>
        <td class="tdStyle">Yes</td>
    </tr>
    <tr class="trStyle">
        <td>Info4</td>
        <td class="tdStyle">Yes</td>
        <td class="tdStyle">No</td>
        <td class="tdStyle">Yes</td>
        <td class="tdStyle">Yes</td>
    </tr>
</table>

CSS

.styleTable .tdStyle[data=Yes]{
    background:lightcoral;
}

.styleTable .tdStyle[data=No]{
    background:lightgreen;
}

.styleTable tr:nth-child(2n) .tdStyle[data=Yes]{
    background:red;
}

.styleTable tr:nth-child(2n) .tdStyle[data=No]{
    background:green;
}

JavaScript

/* var rows = document.getElementsByTagName('tr');
for (var j = 0; j < rows.length; j++) {
    var x = rows[j].getElementsByTagName("TD")
    for (var i = 0; i < x.length; i++) {
        if (x[i].className == "tdStyle") {
            if(j % 2 == 0 ){  //even row
                if (x[i].innerHTML == "Yes") {
                    x[i].style.backgroundColor = 'LightCoral';
                    x[i].style.Color = 'LightCoral';
                    x[i].style.border = '1px solid grey';
                    x[i].innerHTML = '&nbsp;';
                }
                if (x[i].innerHTML == "No") { 
                    x[i].style.backgroundColor = 'lightgreen';
                    x[i].style.Color = 'lightgreen';
                    x[i].style.border = '1px solid grey';
                    x[i].innerHTML = '&nbsp;';
                }
            } else { //odd row
                if (x[i].innerHTML == "Yes") {
                    x[i].style.backgroundColor = 'Coral';
                    x[i].style.Color = 'Coral';
                    x[i].style.border = '1px solid grey';
                    x[i].innerHTML = '&nbsp;';
                }
                if (x[i].innerHTML == "No") { 
                    x[i].style.backgroundColor = 'green';
                    x[i].style.Color = 'green';
                    x[i].style.border = '1px solid grey';
                    x[i].innerHTML = '&nbsp;';
                }
            }
        }
    }

} */

 var x = document.getElementsByTagName("TD")
    for (var i = 0; i < x.length; i++) {
        if (x[i].className == "tdStyle") {
            x[i].setAttribute("data",x[i].innerHTML)
            x[i].innerHTML="&nbsp";
        }
    }