javascript - 在 HTML 表格中显示所选行/单元格的 X 和 Y 值

Question

我在该表中创建了一个带有可单击单元格 (td) 的 HTML 表（类似于 Excel）

我有一个输入字段（只读）

<input type="text" readonly="">

我想显示用户单击此输入字段中的表格时单击的坐标。

例如，如果用户单击 X 轴对应于名称 2 和 Y 轴对应于 16 的单元格，那么我希望输入字段显示“名称 2 | 16”

它是一个参考显示，因此用户可以在杂乱的网格中看到他们被点击的内容。当您单击 Excel 中的任何单元格时，Excel 会执行此操作。

我在这里创建了一个 jsfiddle

寻求一些帮助。

score 2 · Accepted Answer

在中添加idof cellRef，input然后在您的mouseup处理程序中添加以下代码：

var row = $(this).closest('tr').index() + 1;
var cell = $(this).index();
$('#cellRef').val(row + ' | ' + cell);

要获取行的标签（以便您可以将输入格式化为Name 1 | 1，请使用此行设置row：

var row = $(this).closest('tr').find('td:first').text();

score 0 · Accepted Answer

好吧，我可以提出以下建议：

var rowIndex= jQuery.ArrayIn($(this).parent(),$('#tableID tr'));
var columnIndex=jQuery.ArrayIn($(this),$(this).parent().children('td'));

您的脚本可能会忙于此类操作。我宁愿建议您将自定义属性（例如行号和列号）存储在每个属性上<td>，这甚至可以使您的操作不仅简单，而且可以扩展以提供比选择更多的功能。

2 回答 2