使用单击侦听器将数据传递到表格单元格的正确方法是什么

Question

我一直试图想出一种方法来实现一个表的每个单元格的点击监听器。 我意识到选择器'td:eq(index)'允许我为每个单元格单独放置一个事件监听器。

但是，我意识到每次运行这段代码时，所有单元格都会得到变量的最后一个值。 这意味着每次代码运行时都会更新所有值，并且我无法为每个单元格分配不同的数据。

我该如何解决 ？ 我哪里错了？ 实际完成此任务的正确方法是什么？ 这就是我所说的：

var k = 0; var x = 1; var y = 1;
$('#output').on('click','td:eq('+k +')',function(){
    $(this).text((x).toString()+'.'+(y).toString())
})

这使点击监听器和元素在单击后变为1.1 。 但是当我第二次运行代码时：

k = 1; x = 2; y= 2;
$('#output').on('click','td:eq('+k +')',function(){
    $(this).text((x).toString()+'.'+(y).toString())
})

我在右边的位置放置了两个点击监听器，但两个值都是2.2

我的情况下有人想知道， output是我的表格div，这就是我创建表格的方式：

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

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

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

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

    }
}

在此先感谢任何帮助。

Answer 1

这是一种使用单击侦听器将数据传递到表格单元格的方法。

 data = Array($('td').length).fill().map((v, i) => i); $('td').each(function(index) { $(this).data('number', data[index]) $(this).click(function() { alert(JSON.stringify($(this).data())) }) }) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <h3>Click on Cell to Reveal Data</h3> <table style="width: 100%;" border="2"> <tbody> <tr> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> </tr> <tr> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> </tr> <tr> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> </tr> <tr> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> </tr> <tr> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> </tr> </tbody> </table> <!-- DivTable.com --> 

小提琴