title: Looping through cells of table and using ForEach onClick - Javascript/Jquery
body: <p>I've created a table using javascript and populated each cell with the names of months. I want to assign an OnClick function which checks what cells are clicked and sends the name to console.log(). Here is what I've managed so far:</p>
  
  <pre><code>    &lt;script&gt;
  
      function monthCalender() {
  
          var chkbxMonth = document.querySelectorAll('#checkboxMonth');
          var body = document.getElementsByTagName("body")[0];
  
          var tbl = document.createElement("table");
          tbl.id = ("Month_Table");
  
          var tblBody = document.createElement("tbody");
  
          for (row = 0; row &lt; 4; row++) {
              var tblRow = document.createElement("tr");
  
              for (col = 0; col &lt; 3; col++) {
                  var cell = document.createElement("td");
                  var a = (row * 3) + col;
  
                  cell.id = "Month_" + a;
                  cell.setAttribute("data-val", chkbxMonth[a].querySelector(".checkboxMonth").id);
  
                  var cellContent = document.createTextNode(chkbxMonth[a].textContent);
  
                  cell.appendChild(cellContent);
  
                  tblRow.appendChild(cell);
  
              }
              tblBody.appendChild(tblRow);
  
          }
          tbl.appendChild(tblBody);
  
          body.appendChild(tbl);
  
          tbl.setAttribute("border", "2");
  
  
          $(function () {
              $('td').click(function () {
                  $(this).toggleClass('on');
              })
          });
  
  
  
          var rows = document.getElementById("Month_Table").rows;
          for (var p = 0; p &lt; rows.length; p++) {
  
              var col = rows[p].getElementsByTagName("td");
  
              for (q = 0; q &lt; col.length; col++) {
                  console.log(col[q]);
  
                  //col.forEach(k =&gt; k.addEventListener('onClick', event =&gt; {
  
                  //    console.log("Cell has been checked");
  
                  //}));
              }
  
  
          }
  
  
  
  
      }
  
  
  
      monthCalender();
  
  &lt;/script&gt;
  </code></pre>
  
  <p>The problem I'm having is when I write console.log(col[q])(found near the bottom of the script) it sends only the cells of the first column to the console rather than all the cells. Am I iterating through the cells incorrectly or am I missing another loop?</p>
  
  <p>Also, where would I add the onclickAddevent listener?</p>