javascripthtmlhtml-tablecolorstablecell

How do I change the background color of an HTML table cell with javascript?

I am trying to change the background color of table cells found in my "takenappt" array to black, rather then the default white. Here is what I have so far:

<!DOCTYPE html>

<html>

<head>
<title>Test</title>
</head>

<body>

<table id="table">
</table>

<script type="text/javascript">

    //this code prints out the table.
    let table = document.getElementById("table");
    for (a = 0; a < 3; a++) {
        let row = table.insertRow(a);
        for (b = 0; b < 3; b++) {
            row.insertCell(b);
            table.rows[a].cells[b].innerHTML = a;
            table.rows[a].cells[b].id = a + ":" + b;
        }
    }

    var takenappt = ["0:1", "1:2"];
    var repeat = takenappt.length;

    //this code is supposed to go through my takenappt array and change the background color of certain table cells.
    for (i = 0; i < repeat; i++) {
        var appt = document.getElementById(takenappt[i]);
        appt.style.backgroundColor = black;
    }

</script>

</body>

</html>

I was trying to store each table cell with a row:column key, and then put certain keys in my takenappt array, in order to retrieve them from the array and use it to change the color of that table cell. Any help would be greatly appreciated.

Solution

  • Change the line = black to = "black" because its a string and strings are always written with quotes.