Question

我正在尝试创建一个动态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>

Answer 1

添加

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

下的

d=rows.insertCell(j);

在每个td上设置唯一ID 显然，您可以根据自己的喜好更改语法r2c4（可能是3.行和5.单元格）。

如果要在单击特定td时调用函数，您甚至可以将行索引（i）和列索引（j）传递给该函数。

旁注
您应该考虑使用像jQuery这样的JavaScript库或框架进行操作。从长远来看，这将有助于你的工作。

Answer 2

问题是范围问题。添加事件侦听器时，d的引用会更新为您创建的最后一个表格单元格。

您只需将事件监听器的功能更改为：

即可

function myfunc() {
     this.style.backgroundColor="red";
}

这样this引用它所附加的对象。根据您的意图，如果您可以访问单元格，则可能不需要唯一的ID。

Answer 3

使用包含wongcode解决方案的方法，您可能希望考虑以下代码：

<html>
<head>
<style>
#myTbl{ border:1px solid black;text-align:center;padding:2px;margin:3px 3px 3px 3px; }
#myTbl td{ width: 50px; height: 50px; background-color: yellow;}
</style>
</head>
<body>
<script>

function onCellClicked(e)
{
    this.style.backgroundColor = 'red';
}

function makeit()
{
    var tbl=document.createElement("table");
    tbl.id = 'myTbl';
    var curCellIndex = 0;
    for(i=0;i<5;i++)
    {
        var rows=tbl.insertRow(i);
        for(j=0;j<7;j++)
        {
            d=rows.insertCell(j);
            d.id = 'cell_' + curCellIndex;
            curCellIndex++;
            d.addEventListener("click",onCellClicked, false);
        }
     }
    document.body.appendChild(tbl);
}

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

一些优点包括：

在您的编辑器中创建的较小的html文件
在浏览器中创建的较小的HTML代码
使用上下文和此关键字
内存消耗较小，因为每个TD不包含完整内存事件处理程序的主体（它只包含一个'指针' 要执行的功能）

编辑：忘记添加代码以向单元格提供ID。现在修好了。

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

3 个答案: