JSFiddle - React, Tailwind, and code Playground

HTML

<form name="frm1">
    <table>

        <table id="mytable">
            <TR>
                <TD></TD>
                <TD></TD>
                <TD></TD>
                <TD></TD>
                <TD></TD>
            </TR>
            <TR>
                <TD></TD>
                <TD></TD>
                <TD></TD>
                <TD></TD>
                <TD></TD>
            </TR>
            <TR>
                <TD></TD>
                <TD></TD>
                <TD></TD>
                <TD></TD>
                <TD></TD>
            </TR>
            <TR>
                <TD></TD>
                <TD></TD>
                <TD></TD>
                <TD></TD>
                <TD></TD>
            </TR>
            <TR>
                <TD></TD>
                <TD></TD>
                <TD></TD>
                <TD></TD>
                <TD></TD>
            </TR>
        </table>
        <tr> 
            <input type="button" value="Color It" onclick="color()" />
                <input type="button" value="Clear" onclick="clearit()" />        
        </tr>    
    </table>
</form>

CSS

#mytable {
    width:400px;
    border: 1pt solid black;
}
#mytable tr {
    height:50px;
}
#mytable td {
    width:20%;
    border: 1px solid black;
}

JavaScript

function color(){
    var x = document.getElementsByTagName('td');
   for(i=0;i<x.length;i++) {
       x[i].style.backgroundColor ="blue";
    }
}

function clearit(){
     var x = document.getElementsByTagName('td');
     for(i=0;i<x.length;i++) {
       x[i].style.backgroundColor = "";
     }
}