如何在通过迭代创建HTML table时动态设置<TD>的id，然后在onBlur动作中获取ID值？

Question

我正在尝试通过遍历数组来动态创建 HTML table，并且在每次迭代中，从 stepper 变量中将特定单元格的 ID 设置为 i 的值在for循环中。然后我希望能够在 onBlur 事件之后访问单元格 ID。

这是我试过的：

        function saveToDB(id) {
            document.write(id);
        }
        
        function makeEditTableHTML(studentArray) {
                var result = "<table id='dataEditTableid' class='stripe' border=1><thead><tr><td><b>ID</b></td><td><b>Student Email</b></td><td><b>Target</b></td></tr></thead>";
                result += "<tbody>";
                for(var i=0; i<studentArray.length; i++) {
                    result += "<tr>";
                    result += "<td>"+studentArray[i][1]+"</td>";
                    result += "<td>"+studentArray[i][0]+"</td>";
                    result += "<td id=i contenteditable='true' onBlur='saveToDB(this.id)'></td>";
                    result += "</tr>";
                }
                result += "</tbody></table>";

                return result;
            }

document.write 仅用于测试目的，但无论正在编辑的单元格如何，它始终输出字母 i。

如何对其进行编程，以便在 onBlur 事件发生时将活动单元格的 ID 值传递到 saveToDB 函数？

提前致谢。

Answer 1

您正在将字母 i 硬编码到单元格中。您需要连接它，所以：

"<td id=i contenteditable='true' onBlur='saveToDB(this.id)'></td>";

需要：

"<td id=" + i + " contenteditable='true' onBlur='saveToDB(this.id)'></td>";

如何在通过迭代创建HTML table时动态设置<TD>的id，然后在onBlur动作中获取ID值？

How to dynamically set id of <TD> when creating HTML table via iteration and then get ID value onBlur action?

javascript

onblur