Question

我正在尝试为我的作业的一部分创建一个表，但是我很难以正确的方式实现事件监听器。我要显示的<td>here</td>数据似乎已修复，并且我不知道如何解决此问题。

在表行上的事件侦听器上有很大的帮助，但是我找不到使用循环分配数据的示例。

这是我的代码：

var functionCreate = function(intWidth, intHeight) {
    var myRow;
    var intCell;

    $('#output').append('<table border = \"1\">');

    for(var i = 0; i< intHeight;i++){

        $('#output').find('table').append('<tr>');
        for(var j = 0; j < intWidth; j ++){
            intCell = 'click me';

            $('#output').find('tr:last').append('<td>'+intCell)

            $('#output').on('click',"td", function(){

                $(this).text((i+1).toString()+'.'+(j+1).toString());//(row.col)
            })
        }
    }

        return jQuery('output');
};

所发生的是，最终的row.col值被分配给此处的所有<td></td>。我不知道如何赋予每个人不同的价值。

所以，如果我通过functionCreate(3,5)。行中的所有数据（单击后）将变为5.3。

我想我的问题是如何仅将点击行为分配给相关的<td></td>？还是有其他方法可以传递数据？

谢谢。

Answer 1

此问题是由于hoisting造成的：

您的错误的最低限度再现

// Demonstration of how easy it is for this to mess up your loops.
    
    var txt = ["a","b","c"];
    
    for (var i = 0; i < 3; ++i ) { 
       var msg = txt[i];
        setTimeout(function() { alert(msg); }, i*1000);        
    }
    
    // Alerts 'c', 'c', 'c'

解决方案

// Pattern to avoid that by binding to variable in another function.

var txt = ["a","b","c"];

for (var i = 0; i < 3; ++i ) {    
    setTimeout((function(msg) { 
      return function() { alert(msg); } 
    })(txt[i]), i*1000);        
}

// Alerts 'a','b','c'

Answer 2

您可以使用data属性来避免吊装问题。

var functionCreate = function(intWidth, intHeight) {
    var myRow;
    var intCell;

    $('#output').append('<table border = \"1\">');

    for(var i = 0; i< intHeight;i++){

        $('#output').find('table').append('<tr>');
        for(var j = 0; j < intWidth; j ++){
            intCell = 'click me';

            var cell = $('<td>'+intCell).data('row', i+1).data('col', j+1);
            $('#output').find('tr:last').append(cell);
        }
    }

        return jQuery('output');
};



$('#output').on('click',"td", function(){
    var $this = $(this);
    var row = $this.data('row');
    var col = $this.data('col');

    $this.text(row+'.'+col);//(row.col)
})

并且，事件注册可以从循环中移到外部。

使用for循环分配数据时，在表td上单击侦听器

2 个答案:

您的错误的最低限度再现

解决方案