JSFiddle - React, Tailwind, and code Playground

by Firdaus Zailani

HTML

<table>
    <tr>
        <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>
        <td>Info2</td>
        <td class="tdStyle">Yes</td>
        <td class="tdStyle">No</td>
        <td class="tdStyle">Yes</td>
        <td class="tdStyle">Yes</td>
    </tr>
    <tr>
        <td>Info3</td>
        <td class="tdStyle">Yes</td>
        <td class="tdStyle">No</td>
        <td class="tdStyle">Yes</td>
        <td class="tdStyle">Yes</td>
    </tr>
</table>

<table>
    <tr>
        <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>
        <td>Info2</td>
        <td class="tdStyle">Yes</td>
        <td class="tdStyle">No</td>
        <td class="tdStyle">Yes</td>
        <td class="tdStyle">Yes</td>
    </tr>
    <tr>
        <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>
        <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>

<table>
    <tr>
        <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>
        <td>Info2</td>
        <td class="tdStyle">Yes</td>
        <td class="tdStyle">No</td>
        <td class="tdStyle">Yes</td>
        <td class="tdStyle">Yes</td>
    </tr>
    <tr>
        <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>
        <td>Info4</td>
        <td...

CSS

table {margin-bottom:2em}

JavaScript

+ function () { //
    var tables = document.getElementsByTagName('table');
    for (var k = 0; k < tables.length; k++) {
        var rows = tables[k].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;';
                        }
                    }
                }
            }
        }
    }
}()