为每个表格单元格动态添加 id答案

【问题标题】：Add id dynamically to each table cells为每个表格单元格动态添加 id
【发布时间】：2014-05-25 01:30:47
【问题描述】：

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

【问题讨论】：

标签： javascript dynamic html-table

【解决方案1】：

只需添加

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

下

d=rows.insertCell(j);

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

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

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

【讨论】：

因为 i 和 j 是局部变量，我如何在 makeit() 函数之外使用这个 id？
有几种方法：1. 将它传递给函数makeit(i,j)，2. 解析id，3. 将data 属性附加到td，例如d.setAttribute('data-row', i) 和d.setAttribute('data-column', j) 然后您可以通过查询这些数据属性轻松访问行和列
我添加一个 addEventListener lyk this d.addEventListener("click",myfunc(i,j),false);然后添加函数 function myfunc(a,b) { var m=document. getElementById("r" + a + "c" + b); m.style.backgroundColor="红色"; } 它不工作：{
乍一看我觉得不错。也许您可以通过在getElementById 之后输出console.log(m) 进行调试。如果这没有帮助，也许发布一个 jsfiddle。

【解决方案2】：

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

您可以简单地将事件监听器的函数更改为：

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

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

【讨论】：

谢谢！它可以工作，但我需要为每个单元格设置一个 id，因为我打算将这个表用于不同的目的。我也需要在 makeit() 函数之外使用这些 id。

【解决方案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 代码
上下文和 this 关键字的使用
更少的内存消耗，因为每个 TD 不包含完整的事件处理程序的主体（它只包含一个指向要执行的函数）

编辑：忘记添加代码给单元格一个 id。现已修复。

【讨论】：