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

Question

我创建了一个 HTML 表格，其中包含可点击的单元格 (td)(类似于 Excel)

我有一个输入框(只读)

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

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

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

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

我在这里创建了一个 jsfiddle

http://jsfiddle.net/37PGT/

寻求帮助。

Answer 1

将 cellRef 的 id 添加到 input，然后在您的 mouseup 处理程序中添加此代码:

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

Updated fiddle

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

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