Changing the Contents of Table Cells

Question

I'm new to JavaScript and my goal here is to change the color of the text in each cell of the table based on its content. For some reason, it only works on the first column.

 function key() { var test = document.getElementById("schedule"), testChildS, testChild; var rows = test.rows.length; var columns = test.rows[0].cells.length; for (var r = 0; r < rows; r++) { for (var c = 0; c < columns; c++) { testChildS = test.rows[r].cells[c].innerHTML.toLowerCase(); testChild = test.rows[r].cells[c]; if (testChildS.includes("private")) { testChild.style.color = "red"; } else if (testChildS.includes("qi gung")) { testChild.style.color = "tan"; } else if (testChildS.includes("mini")) { testChild.style.color = "lightblue"; } else if (testChildS.includes("kids")) { testChild.style.color = "blue"; } else if (testChildS.includes("all")) { testChild.style.color = "pink"; } else if (testChildS.includes("instructor")) { testChild.style.color = "purple"; } else if (testChildS.includes("yang")) { testChild.style.color = "lightgreen"; } else if (testChildS.includes("chen")) { testChild.style.color = "green"; } else if (testChildS.includes("lion")) { testChild.style.color = "pink"; } else if (testChildS.includes("adult")) { testChild.style.color = "blue"; } else if (testChildS.includes("chinese")) { testChild.style.color = "lightpurple"; } else { testChild.style.color = "black"; } } } } window.onLoad = key();

Answer 1

try to get all cells like

let cells = document.querySelectorAll('table td');

and then iterate them

cells.forEach(cell => {...})