Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Javascript</title>
    <style>
        td {
            text-align: right;
            padding: 3px;
            border: 1px solid black;
        }
        .red {
            background-color: red;
        }
        .green {
            background-color: lightgreen;
        }
    </style>
</head>
<body>
    <div id="output"></div>

    <script>
        function paintGreen(id){
            // get classes before the event, split by space
            let myElem = document.getElementById(id);
            let myClasses = myElem.className.split(" ");

            // check for green and recopy other classes
            let output = "";
            let foundGreen = false;
            for(let i = 0; i < myClasses.length; ++i){
                if (myClasses[i] == "green"){
                    foundGreen = true;
                } else {
                    output += (" " + myClasses[i]);
                }
            }
            // add green if there was none
            if (!foundGreen){
                output += " green";
            }
            myElem.className = output.trim();
        }


        let content = "";
        content += "<table>\n";
        let cols = 8;
        let rows = 8;
        let value = 0;
        for(let i = 0; i < rows; ++i){
            content += "   <tr>\n";
            for(let j = 0; j < cols; ++j){
                content += "      <td onclick=\"paintGreen(this.id)\" ";
                if ((i + j) % 2){
                    content += "class=\"\"";
                } else {
                    content += "class=\"red\"";
                }
                content += " id=\"td-" + value + "\">" + String.fromCharCode(97+j) + (i+1) + "</td>\n";
                ++value;
            }
            content += "   </tr>";
        }
        content += "</table>";

        let myDiv = document.getElementById("output");
        myDiv.innerHTML = content;

    </script>

</body>
</html>