我正在尝试创建一个动态 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;
under
d=rows.insertCell(j);
为每个设置唯一的 idtd
.
显然,你可以改变语法r2c4
(这将是第 3 行和第 5 格)根据您自己的喜好。
如果你想在点击特定的时候调用一个函数td
你甚至可以传递行索引(i
) 和列索引 (j
) 到该函数。
边注
您应该考虑使用 JavaScript 库或框架,例如jQuery https://jquery.org/对于这样的操作。从长远来看,这会给你的工作带来很大的便利。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)