我使用 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 侦听器?
您的代码正在尝试将 OnClick 分配给列。您需要将其分配给每个单元格。这是实现这一目标的示例:
我使用了您在代码中分配的“Month_Table”ID。
document.querySelectorAll('#Month_Table td')
.forEach(e => e.addEventListener("click", function() {
// Dos something here
console.log("clicked")
}));
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句