如何在Javascript中为表格中的每个单元格挂钩onclick事件？答案

【问题标题】：How to hook onclick event for each cell in a table in Javascript?如何在Javascript中为表格中的每个单元格挂钩onclick事件？
【发布时间】：2025-12-04 08:40:01
【问题描述】：

我在想是否有比这种方法更好的解决方案来为表格中的每个单元格添加 onclick 处理程序：Adding an onclick event to a table row

更好的方式是我不需要为每个单元格设置“cell.onclick = function”。

我只需要获取用户点击的单元格的坐标。

谢谢！

编辑：“坐标”表示左上角单元格为 0x0，第一行中的第二个单元格为 0x1，等等。

【问题讨论】：

使用 JQuery 并一次将函数绑定到所有 <td> 的点击事件：$("td").live('click', function(){});

标签： javascript events

【解决方案1】：

你在找这个吗？

$(function(){
    $("#tableId tr td").click(function(event) {
       alert(event.pageX);
       alert(event.pageY);
    });
});

如果您的表格单元格是动态生成的：

$(function(){
    $("#tableId tr td").live('click', function(event) {
       alert(event.pageX);
       alert(event.pageY);
    });
});

根据 OP 评论更新：

要获得 top 和 left 值，您可以试试这个：

$(function(){
    $("#tableId tr td").click(function(event) {
       alert($(this).offset().top);
       alert($(this).offset().left);
    });
});

正如您的其他评论所显示的，您可能正在寻找被点击单元格的 ID，您可以试试这个：

$(function(){
    $("#tableId tr td").click(function(event) {
       alert($(this).attr('id'));
    });
});

但要使上述工作正常，假设所有单元格都已经具有id 属性。

【讨论】：

第一个示例有效，但不是以像素为单位，我需要表格中的位置（例如左上角单元格的 0x0）。
我可以将坐标添加为单元格的 ID - 如果我可以从“事件”中获取被点击单元格的 ID，它会很好用。
@MartyIX：无法从事件对象中获取 id。
$("#" + this.ed + "tr td").click(function(event) { $.dump(this.id); });这对我很有效，是的，它不是来自事件对象。
@MartyIX：就我能理解你的问题和你的 cmets 而言，我已经更新了我的答案。谢谢

【解决方案2】：

您正在寻找事件委托。

http://icant.co.uk/sandbox/eventdelegation/

在其他例子中。基本上观察一些更高的容器，例如点击事件的表格，然后通过检查传递给事件处理程序的事件来确定您是否愿意处理它。

因此，如果点击发生在表格内，您可以确定事件的目标并假设存在有效的 td 来处理该事件。

这样做的好处是允许您动态添加更多表格单元格，而无需为所有单元格添加处理程序。

jQuery 特别是作为使用这种方法的优秀委托方法。 http://api.jquery.com/delegate/

【讨论】：