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:
<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>
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?
Also, where would I add the onclickAddevent listener?
Your code is trying to assign OnClick to the columns. You need to assign it to each cell. Here is an example to achieve that:
I used "Month_Table" id that you assigned in your code.
document.querySelectorAll('#Month_Table td')
.forEach(e => e.addEventListener("click", function() {
// Dos something here
console.log("clicked")
}));
Why are you mixing jQuery and regular javascript? Seems jQuery is already integrated in your project, so you can bind the click event to all cells without a loop:
$("td","#Month_Table").click(function(e){
$(this).toggleClass('on');
console.log("Cell has been checked");
};
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.