向动态创建的表中的单元格添加单击函数 - JavaScript

Adding a click function to cells in a dynamically created table - JavaScript

本文关键字：函数 单击 JavaScript 添加 动态 创建 单元格      更新时间：2023-09-26
var tableData = document.getElementsByTagName("td");
for(var i = 0; i < tableData.length; i++){
    var x = tableData[i];
    x.addEventListener("click", fun1(x.textContent));
}
function fun1(y){
    document.getElementById("testB").textContent = y;
}
我

正在尝试为动态创建的表中的每个单元格添加一个单击功能（我无法知道表中有多少个单元格或它们的 id 是多少，但我只需要单元格中包含的文本）

我想用单元格的内容更新一个按钮，截至目前，它不会在单击时更新，而是将按钮更新为表格的最后一个值。

我对 JavaScript 相当陌生，感谢您提供的任何帮助。

这是我使用的解决方案，这要归功于下面提供的答案

var tables = document.getElementsByTagName("table");
for(var i = 0; i < tables.length; i++){
    tables[i].addEventListener("click",
    function(e) {
        if(e.target && e.target.nodeName == "TD") {
            fun1(e.target.textContent);
        }
     }
);
}
function fun1(y){
    document.getElementById("testB").textContent = y;
}
我

选择了这个解决方案，因为生成表的脚本不是我的，因此我不知道我想要的表的 ID 是什么，也不知道它实际创建了多少个表。

几乎可以肯定的是，如果所有（甚至许多）事件处理程序在单击时都应执行相同的操作，则几乎肯定不希望将事件处理程序单独添加到每个表单元格。

DOM 事件模型旨在支持委派，在这种情况下，这是一个更好的解决方案。简而言之：单个单元格不会对点击做出反应，但一些被认为是永久固定装置的祖先元素（例如，它们所在的<table>）会检测细胞上的点击并适当地响应它们。

下面介绍如何设置委派：

document.getElementById("#mytable").addEventListener("click",
    function(e) {
        if(e.target && e.target.nodeName == "TD") {
            fun1(e.target.textContent);
        }
     }
);

当然，你可以选择任何你想要的祖先元素，甚至是<body>，如果这是必需的。另请注意，这种操作方式意味着即使将单元格添加到表或从表中删除单元格，您的代码也会按预期运行 - 您只需在页面初始化时执行此操作一次。

x.addEventListener("click", fun1(x.textContent));

这一行是你的问题 - addEventListener 查找函数引用，你只是在调用函数（它不返回函数）。将其包装在匿名函数中，或将值绑定到引用。

x.addEventListener("click", function() { 
    fun1(x.textContent)
}, false); //also a good idea to add the event bubbling boolean param

或者，ES6 箭头语法：

x.addEventListener("click", () => fun1(x.textContent), false);
相关文章：