gpt4 book ai didi

javascript - 将 id 动态添加到每个表格单元格

转载 作者:塔克拉玛干 更新时间:2023-11-02 22:33:54 24 4
gpt4 key购买 nike

我正在尝试创建一个动态 js 表,我想动态地为每个单元格提供 id。我想使用这些 id 在不同的 js 事件处理程序中使用。怎么做到的?我尝试了不同的方法,但都没有用!

<html>

<head>
<style>
#colors {
float: right;
width: 400px;
height: 400px;
}
</style>
</head>

<body>
<script>
var d;
var k = 0;
function makeit() {
var tbl = document.createElement("table");
var atts = document.createAttribute("style");
atts.value = "border:1px solid black;text-align:center;padding:2px;margin:3px 3px 3px 3px;";
tbl.setAttributeNode(atts);
for (i = 0; i < 5; i++) {
var rows = tbl.insertRow(i);

for (j = 0; j < 7; j++) {
d = rows.insertCell(j);
d.height = "50px";
d.width = "50px";
d.style.backgroundColor = "yellow";
d.addEventListener("click", function myfunc() { d.style.backgroundColor = "red"; });


}
}


document.body.appendChild(tbl);
}

window.onload = makeit;
</script>
</body>

</html>

最佳答案

只需添加

d.id = "r" + i + "c" + j;

d=rows.insertCell(j);

为每个 td 设置唯一的 ID。
显然,您可以根据自己的喜好更改语法 r2c4(即 3.row 和 5.cell)。

如果你想在点击一个特定的td时调用一个函数,你甚至可以传递行索引(i)和列索引(j) 到那个函数。

旁注
您应该考虑使用像 jQuery 这样的 JavaScript 库或框架。对于这样的操作。从长远来看,这将极大地促进您的工作。

关于javascript - 将 id 动态添加到每个表格单元格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23003341/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com