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

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

小提琴