[英]Using Javascript to embed an onClick event to an HTML div
I'm trying to make an interactable and configurable grid using divs as their cells.我正在尝试使用 div 作为它们的单元格制作一个可交互且可配置的网格。
To first give a bit of context on this part of the code, I'm basically just repeating td's in HTML output then appending a specific amount of divs into the td's/rows (cellID is just a method for decorating the div names);首先给出这部分代码的一些上下文,我基本上只是在 HTML 输出中重复 td,然后将特定数量的 div 附加到 td 的/行中(cellID 只是一种装饰 div 名称的方法);
var table, row, div;
table = document.createElement('table');
for (var i=0; i < rows; i++)
{
row = document.createElement('td');
row.id = "row-" + i;
for (var j=0; j < cols; j++)
{
div = document.createElement('div');
div.id = cellID(i, j);
row.append(div);
}
table.append(row);
}
Let's say that: -rows = 4 and -cols = 2 |假设: -rows = 4 和 -cols = 2 | The output result on the user's end would be this :
用户端的输出结果是这样的:
Now my current problem that I'm trying to figure out is how to make every repeated div be given the onClick() event so that an event occurs when you click on the boxes, here is what I tried to make this work :现在我想弄清楚的当前问题是如何为每个重复的 div 赋予 onClick() 事件,以便在单击框时发生事件,这是我尝试进行的工作:
These things I tried were all things that had been recommended throughout, but I don't know what else could make it work.我尝试的这些东西都是自始至终推荐的东西,但我不知道还有什么可以使它起作用。
What do you think the problem may be there?您认为可能存在什么问题?
-
div.addEventListener()
should work. div.addEventListener()
应该可以工作。
But you need to create valid DOM structure.但是您需要创建有效的 DOM 结构。 Rows are
tr
, cells are td
.行是
tr
,单元格是td
。 You can put the div
in the td
, or just use the td
directly.您可以将
div
放在td
,或者直接使用td
。
let rows = 2, cols = 4; var table, row, div; table = document.createElement('table'); for (var i = 0; i < rows; i++) { row = document.createElement('tr'); row.id = "row-" + i; for (var j = 0; j < cols; j++) { let cell = document.createElement("td"); div = document.createElement('div'); div.id = cellID(i, j); div.addEventListener("click", function() { console.log('Clicked on', this.id); }); div.innerText = div.id; cell.append(div); row.append(cell); } table.append(row); } document.body.appendChild(table); function cellID(i, j) { return `cell-${i}-${j}`; }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.