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

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 -->

Fiddle