Javascript 具有动态创建表的addEventListener方法_Javascript_Css_Html Table

Javascript 具有动态创建表的addEventListener方法

javascript css

Javascript 具有动态创建表的addEventListener方法,javascript,css,html-table,Javascript,Css,Html Table,我不熟悉addEventListener方法。我试图在动态创建的js表上使用onClick事件来更改单元格值，但当我将addeventlistener代码行放入函数中时，该表消失。我试图给每个单元格一个动态id，然后使用以下代码行添加一个addeventlistener方法： s.setAttribute('id',"tab"+v); document.getElementById("tab"+v).addEventListeners("click",function(){va

我不熟悉

addEventListener

方法。我试图在动态创建的js表上使用

onClick

事件来更改单元格值，但当我将

addeventlistener

代码行放入函数中时，该表消失。我试图给每个单元格一个动态id，然后使用以下代码行添加一个

addeventlistener

方法：

s.setAttribute('id',"tab"+v);
         document.getElementById("tab"+v).addEventListeners("click",function(){var g=document.getElementById("tab"+v);
         g.innerHTML="changed";},false);

        v++;

谁能告诉我怎么解决这个问题

<html>
<head>
<title>table dynamic</title>
<style>
*{margin:0px;padding:0px;}

.tableShape{
    width:300px;
    height:300px;
    font-size:30px;
    text-align:centre;
    color:red;
    border:1px solid red;

}
.rowShape{height:33%;width:33%;border:1px solid black;}


</style>
</head>
<body>
<script>
var i,j,v=1;
var arr=new Array(3);
for(i=0;i<3;i++){
arr[i]=new Array(3);
}
for(i=0;i<3;i++){
for(j=0;j<3;j++){
arr[i][j]=1;
}}

function tabs(){
   var k,t;
    var m=document.createElement("table");
    m.setAttribute('class',"tableShape");

    for(var  k = 0;k < 3; k++){
    var p=m.insertRow(k);
       for( var t = 0;t < 3; t++){
         var s=p.insertCell(t);
         s.setAttribute('class',"rowShape");
        s.innerHTML+=arr[k][t];
    s.setAttribute('id',"tab"+v);
         document.getElementById("tab"+v).addEventListeners("click",function(){var g=document.getElementById("tab"+v);
         g.innerHTML="changed";},false);

        v++;
         }
         }
         document.body.appendChild(m);
    }


    window.onLoad=tabs();
</script>
</body>
</html>


表动态
*{边距：0px；填充：0px；}
表形{
宽度：300px；
高度：300px；
字体大小：30px；
文本对齐：居中；
颜色：红色；
边框：1px纯红；
}
.rowShape{高度：33%；宽度：33%；边框：1px纯黑色；}
变量i，j，v=1；
var-arr=新阵列（3）；
对于（i=0；i，您必须知道这样一个事实，即您作为addEventListener（）的参数提供的回调函数在事件发生时首先求值，因此它随后取“v”值。
您需要的是v值的本地副本-您可以通过闭包实现这一点，如下所示：
s.setAttribute('id', "tab" + v);
document.getElementById("tab" + v).addEventListeners("click", (function(val) {
        return function() {
            var g = document.getElementById("tab" + val);
            g.innerHTML = "changed";
        };
        })(v), false);

    v++;

您可以在这里找到一个简单的闭包示例：
干杯
弗洛里安