javascript - HTML 表格中的可点击单元格

Question

我有一个 HTML 表格，大约有 20 列和 10 行。每列都有一个字母，每一行都有一个数字。使每个单元格都可点击以执行 JavaScript 函数并传入坐标的最佳方法是什么？

我曾考虑过为每个单元格添加一个 id 或 onclick 属性并对坐标进行硬编码，但这会使将来扩展表格变得更加困难，而且效率似乎很低。

我认为获取单元格所在的行很容易，只需获取父元素即可。但我不知道如何获取该列？

这是获取单元格的行和列的既定方法吗？

这是特别的页面:http://jonathanb.co.uk/papers/default.html

我有一个链接列表，每个单元格对应一个链接。我计划允许重新排序行和列或至少隐藏一些。目前我正在使用 JavaScript 创建表格，但我认为使用 php 会更好。

Answer 1

您可以使用rowIndex 动态获取表格单元格的行和列。和 cellIndex (假设您有一个名为 cell 的元素):

var rowNumber = cell.parentNode.rowIndex + 1;
var colNumber = cell.cellIndex + 1;

DEMO

-查看开发者控制台输出-

添加点击监听器应该很容易(取决于您是否要使用 jQuery)。