在表的单元格中循环并使用ForEach onClick-Javascript/Jquery

我使用javascript创建了一个表，并用月份的名称填充每个单元格。我想分配一个OnClick函数，该函数检查单击的单元格并将名称发送到console.log（）。以下是我迄今为止所做的工作：

    <script>

    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 < 4; row++) {
            var tblRow = document.createElement("tr");

            for (col = 0; col < 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 < rows.length; p++) {

            var col = rows[p].getElementsByTagName("td");

            for (q = 0; q < col.length; col++) {
                console.log(col[q]);

                //col.forEach(k => k.addEventListener('onClick', event => {

                //    console.log("Cell has been checked");

                //}));
            }


        }




    }



    monthCalender();

</script>

函数monthCalender（）{
var chkbxMonth=document.querySelectorAll（'checkboxMonth'）；
var body=document.getElementsByTagName（“body”）[0]；
var tbl=document.createElement（“表”）；
tbl.id=（“月表”）；
var tblBody=document.createElement（“tbody”）；
用于（行=0；行<4；行++）{
var tblRow=document.createElement（“tr”）；
用于（列=0；列<3；列++）{
var cell=document.createElement（“td”）；
变量a=（第3行）+列；
cell.id=“月日”+a；
cell.setAttribute（“数据值”，chkbxMonth[a].querySelector（“.checkboxMonth”）.id）；
var cellContent=document.createTextNode（chkbxMonth[a].textContent）；
cell.appendChild（cellContent）；
tblRow.appendChild（单元）；
}
tblBody.appendChild（tblRow）；
}
tbl.附肢儿童（tblBody）；
附肢儿童（tbl）；
tbl.setAttribute（“边界”、“2”）；
$（函数（）{
$（'td'）。单击（函数（）{
$（this.toggleClass（'on'）；
})
});
var rows=document.getElementById（“月表”）.rows；
对于（var p=0；pk.addEventListener（'onClick'，event=>{
//console.log（“单元格已检查”）；
//}));
}
}
}
monthCalender（）；

我遇到的问题是，当我编写console.log（col[q]）（位于脚本底部附近）时，它只将第一列的单元格发送到控制台，而不是所有单元格。我是在错误地遍历单元格还是缺少另一个循环

---

另外，我应该在哪里添加OnClick AddEvent侦听器？

您的代码正在尝试将OnClick分配给列。您需要将其分配给每个单元格。以下是实现这一目标的示例：

我使用了您在代码中指定的“Month_Table”id

document.querySelectorAll('#Month_Table td')
.forEach(e => e.addEventListener("click", function() {
    // Dos something here
    console.log("clicked")
}));

---

为什么要混合使用jQuery和常规javascript？ 似乎jQuery已集成到您的项目中，因此您可以将单击事件绑定到所有单元格，而无需循环：

    $("td","#Month_Table").click(function(e){
        $(this).toggleClass('on');
        console.log("Cell has been checked");
    };

---

如果您想在每一行上添加一个侦听器，为什么不执行类似于

document.querySelector（“#Month_Table td”）.addEventListener（'click'，（e）=>{console.log（e.target，e.target.innerHTML）；}的操作呢？

。另外，请注意，您正在使用

$（'td'）在页面上的所有td上添加一个单击侦听器。单击（…）

（不仅仅是您先前创建的表中的那些）