Javascript: Color even rows and even cells of a table created within a function

Question

Having a bit of an issue with my JS function at the moment.

Essentially the aim of the game here is to get the code setup in such a way where only on even rows and even cells, will the circles from the table be colored yellow, while the rest remain green.

I have it showing like this at the moment:

How it shows when previewing the HTML file

The red squares around the circles indicate the even rows/even cells that need to be colored in yellow instead of green.

Here is my code:

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
    <style>
        body {
            background-color: linen;
        }

        td {
            height: 75px;
            width: 75px;
            background-color: green;
            border-radius: 50%;
            display: inline-block;
        }
    </style>
    <meta charset="utf-8">
    <title></title>
    <script type="text/javascript">
        function validation() {
            var userSubmit = document.getElementById('size').value; //takes the users input and stores it within the variable userSubmit.
            var num_rows = userSubmit; //assigning the users input to the number of rows.
            var num_cols = userSubmit; //assigning the users input to the number of colums.
            var tableBody = ""; //empty string setup for the table.

            for (var r = 0; r < num_rows; r++) {
                tableBody += "<tr>"; //for loop going through the number of rows required to complete the table.
                for (var c = 0; c < num_cols; c++) {
                    tableBody += "<td>" + c + "</td>"; //for loop, within the rows for loop, this is to determine the number of columns required in the table
                }
                tableBody += "</tr>";
            }
            document.getElementById('wrapper').innerHTML = ("<table>" + tableBody + "</table>");
        }
    </script>
</head>

<body>
    <form name="form1">
        <select id="size">
            <option value="3">3x3</option>
            <option value="5">5x5</option>
            <option value="7">7x7</option>
        </select>
    </form>
    <button type="submit" onclick="validation()">Generate Graph</button>

    <div id="wrapper"></div>
</body>

</html>

My function is creating the table from the grid the user selects, but I'm unsure how to approach the JS required to color the cells required as mentioned above.

Any advice would be appreciated, or please let me know if I haven't been clear enough!

Have you considered using the ":nth-child(even)" and ":nth-child(odd)" CSS selectors to do this? — gutnar
I have indeed, however this seems to color an entire row /column. When I need it to specifically skip the first cell then color the 2nd. E.g row 2 would have a yellow 2nd and 4th cell in the 5x5 grid. The .even/ .odd seems to color the entire row. Unless I'm using it incorrectly? — WannaBeGameOver
@gutnar Was going to write a JavaScript approach to this but the nth-child css selector that you mentioned would be a better approach to this actually. Please post it as an answer. — AndrewL64

gutnar gutnar · Accepted Answer · 2020-01-13T21:05:33

Using nested CSS selectors you can color the cells that are both on even rows and even columns.

tr:nth-child(even) td:nth-child(even) {
  background-color: red;
}

The above CSS rule matches all td elements that are an even child of their parent tr which itself is an even child of its parent table.

Javascript: Color even rows and even cells of a table created within a function

2 Answers