显示X＆amp; Y HTML表中所选行/单元格的值

Question

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

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

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

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

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

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

我在这里创建了一个jsfiddle

http://jsfiddle.net/37PGT/

寻求一些帮助。

Answer 1

将id cellRef添加到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();

Answer 2

我可以建议以下内容：

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

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