javascript - 循环遍历表格单元格并使用 ForEach onClick - Javascript/Jquery

Question

我使用 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>

我遇到的问题是，当我编写 console.log(col[q])(在脚本底部附近找到)时，它仅将第一列的单元格发送到控制台，而不是所有单元格。我是否错误地迭代了单元格，或者是否错过了另一个循环？

另外，我应该在哪里添加 onclickAddevent 监听器？

Answer 1

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

我使用了您在代码中分配的“Month_Table”ID。

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