确定表中输入的行和列索引

Posted 2023-02-16

【中文标题】确定表中输入的行和列索引

【英文标题】：Determine row and column index of input in table

【发布时间】：2013-01-05 05:57:42

【问题描述】：

我正在创建一个基于 javascript 的电子表格应用程序。现在我可以动态地将电子表格创建为一个表格，其中包含提供的行数和列数以及每个单元格中的文本输入，如this picture 所示。

我希望有一个通用事件与表中的所有输入相关联，我可以在其中确定触发事件的输入的行索引和列索引。像这样的：

$('.spreadsheet-cell').click(function () 
     var rowIndex = $(this).attr('rowIndex');
     var columnIndex = $(this).attr('columnIndex');
);

我最初尝试通过在创建 html 输入元素时动态添加行和列索引属性来实现它，但是当我在创建原始电子表格后添加行或列时，试图改变这些属性的值会变得混乱大约。我想如果归根结底我可以使该方法起作用，但它看起来很乱，当我认为可能有某种方法使用 jQuery 来确定父 <td> 和 <tr>。

【参考方案1】：

使用 jQuery .index。在您的职能范围内：

var rowIndex = $("#table tr").index($(this).closest('tr'));
var colIndex = $("#table td").index(this);

【讨论】：

@JesseCarter 通过或多或少地反转选择器和.index 参数，您可能会更幸运。 jQuery 似乎同时支持这两者，这让我很困惑，我编写它的方式往往能始终如一地为我的目的工作

我猜这个表会有一个标题行，后面跟着一堆数据行。如果是这样，那么您可能会遇到index() 的问题，如果您不小心，它会将标题行作为索引0。幸运的是，即使没有tbody，也会/应该（？） t 明确地出现在 HTML 中（就我个人而言，我会明确表示）。通过获取.closest('tbody') 中的行索引，您应该没问题。同样，在计算行索引时，您可能需要采取措施拒绝初始单元格，如果那是行标题。

@ExplosionPills 您的实现几乎完美无缺。它会正确获取 rowIndex，但无论选择哪个输入，它都会为每个 columnIndex 返回“1”。我尝试将其更改为： var colIndex = jQuery("#spreadsheet-table td").index(jQuery(this).closest('td'));但如果我这样做，它会开始返回 td 元素相对于整个页面的索引。

@JesseCarter 你能给我一些 HTML 和 JS 吗，最好是在 jsfiddle.net 上？

@ExplosionPills 当然我会尽力而为，我以前从未使用过 jsfiddle，但我知道它是一个很棒的工具，所以我会尝试重现问题