我使用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")
}));
你为什么要混合使用jQuery和常规的javascript?似乎jQuery已经集成在您的项目中,因此您可以将click事件绑定到所有单元格而无需循环:
$("td","#Month_Table").click(function(e){
$(this).toggleClass('on');
console.log("Cell has been checked");
};